@import url('https://fonts.googleapis.com/css2?family=Arbutus+Slab&family=Lato:wght@300;400;700&display=swap');

.errortext {
  color: #df0625;
  font-size: 14px;

display: inline-block;
height: auto;
}
.errortext:empty {

  display: none;
}
.prizelink {

  margin-bottom: 80px;
bottom: 0;
position: absolute;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 100%;

}

.border {

  border: 5px solid #b00000 !important;
  border-image: repeating-linear-gradient(
      45deg,
      #b00000,
      #b00000 5px,
      white 5px,
      white 10px
    )
    5 !important;
}

.frontlink {
z-index: 5 ;
position:inherit;
}

.blackshadow {

  text-shadow:
  -1px -1px 0 #000,  
   1px -1px 0 #000,
   -1px 1px 0 #000,
    1px 1px 0 #000;
}
.whiteshadow {text-shadow:
-1px -1px 0 #fff,  
 1px -1px 0 #fff,
 -1px 1px 0 #fff,
  1px 1px 0 #fff;
}

body {
  margin: 0;
  padding: 0;
 font-family: Lato, TT Norms, Arial, Helvetica, sans-serif;
 font-weight: 400;
 font-style: normal;
 font-size: 15px;
  background-color: #020204;

  position: relative;
/*   height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties 
  height: calc(var(--vh, 1vh) * 100); */
 position: relative;
min-height: 100vh;
background-size: cover ;
background-position: top right;
overflow-x: hidden;
background-repeat: no-repeat;

}
.js-loading *,
.js-loading *:before,
.js-loading *:after {
  animation-play-state: paused !important;
}
/*  * {
    -webkit-overflow-scrolling: touch;
} */

h1{font-size:3.5rem;
margin: 0.5em 0;
font-weight: 600;
}


.masked {
	
/* mask-image: url(file:///D:/pictures/qvc2/images/1seg.png);
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-size: 100%; */
  
  -webkit-mask-position: 0 0;
-webkit-mask-size: 100% auto;
-webkit-mask-image:                linear-gradient(126deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
		

}


p{font-size:16px;
margin: 0.2em 0;
}
.infobutton {
  padding: 0px 0px 0px 0px;
}
.circle {
  border: 1px solid #28334A;
  height: 19px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  width: 19px;
  display: inline-block;
}
.indent1 {

    margin-left: 30px;

}
text {
  fill: #fff;

  font-size: 40;

  text-transform: uppercase;
  font-weight: 600;
}

input, select {
  display: block;
  margin: 0 0 15px 0;
}


  .shadedarea {

    background-repeat:repeat-x;
     text-align:center;
    
    color: #fff;
    background-color: #01294d;

    background-image: url('/images/stars.gif');
    background-size: cover;
background-position: bottom;
    padding: 40px;

	
    
    }




#spin-arrow {
  transition-timing-function: ease-out;
  transform-style: preserve-3d;
animation:spinit 11500ms;

opacity:1;
width: 440px;
height: 440px;
perspective: none;
}

@keyframes spinit {
  0% { perspective: none;opacity:1; transform: rotate(0deg) }
  45% { perspective: none;opacity:1; transform: rotate(0deg) }
  70% { perspective: none;opacity:1; transform: rotate(2160deg) }
    80% {  perspective: none;opacity: 1; transform: rotate(2160deg)  }


    100% {   perspective: 200px; opacity:1; transform: rotate(2160deg) } 
}
#spin-arroww {
  transition-timing-function: ease-out;

transform:rotateX(70deg) scale(1.95, 1.95) translate(-78px, 0px);
animation:spinitt 11500ms;

opacity:1;
width: 300px;
height: 300px;
}

@keyframes spinitt {
  0% { opacity:1; transform: rotate(-90deg) rotateX(0deg)  scale(1, 1) }
  45% { opacity:1; transform: rotate(-90deg) rotateX(0deg)  scale(1, 1) }
  70% { opacity:1; transform: rotate(2160deg)  rotateX(0deg) scale(1, 1)  }
    80% {  opacity: 1; transform: rotate(2160deg) rotateX(0deg) scale(1, 1) translate(0px, 0px) }


  87% {   perspective: 100px; opacity:1; transform: rotate(2160deg) rotateX(70deg) scale(1.95, 1.95) translate(-78px, 0px) } 
}



#spinner {
	
  width: 300px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}

.spin-offer {
transform: scale(0, 0);
  animation:spin 12s linear forwards;
transition-timing-function: ease-in-out;
height: 0px;


}




.over-img{
    position: absolute;
  top: 30%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
}
@keyframes spin {
  0% { opacity:0; transform: scale(0, 0)  translate(0px, -250px); }
  90% { opacity:0 ; transform: scale(0, 0)  translate(0px, -250px); }
95% { opacity:0 ; transform: scale(1, 1) translate(0px, -250px);}
  100% { opacity:1 ; transform: scale(1, 1) translate(0px, -300px);}

}

#fade {
  transition-timing-function: ease-in-out;
  transition:1s;
background-repeat: no-repeat;
 
      animation:fade 1s linear infinite;

}


@keyframes fade {
	
  0% { opacity:1; }
100% { opacity:0;}

}
.cell{
    width: 1em;  
    height: 1em;
    font-size:80px;
    overflow: hidden;
    position:absolute;
    top:59%;
    left:50%;
    margin:-0.5em 0 0  -0.5em;
    opacity:0;
    animation:go 3.7s;
	animation-delay: 2s;
    transform-origin:left bottom;
}
.num{
	color:#28334A;
    position:absolute;
	font-weight:800;
    width: 1em;
    line-height: 1em;  
    text-align: center;
    text-shadow:1px 1px 2px rgba(255,255,255,.3);
    animation:run 5.7s steps(6);
}
@keyframes run{
    0%{top:0;}
    100%{top:-6em;}
}
@keyframes go{
  0%   {opacity:1;}
  84%  {opacity:1;transform:rotate(0deg) scale(1);}
  100% {opacity:0;transform:rotate(360deg) scale(.01);}
}

.center-img {

  display: block;
  margin-left: auto;
  margin-right: auto;
  

}



.bg {
	
		background-image:url('file:///D:/pictures/qvc2/images/TGQG-background-top-rightxx@1x.png'), url('file:///D:/pictures/qvc2/images/TGQG-background-bottom-right@1x.png');
	

width: 100%;
height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);

background-position: right top, right bottom;
background-repeat: no-repeat, no-repeat;
background-attachment: fixed;
background-repeat: no-repeat;
}
.Headlinetext {
 font-family: Arbutus Slab,Archer, Palentino, "Times New Roman", Times, serif;

}
.smallpadbottom {
	margin-bottom: 0.375em;
		margin-top: 0;
}
.bigpadbottom {
	margin-bottom: 1em;
	margin-top: 0;
}
.midpadbottom {
	margin-bottom: 0.5em;

}
.midpadtop {
	margin-top: 0.5em;

}

.padone {
	margin-bottom: 1em;
	margin-top: 1em;
}
.padpoint2 {
	margin-bottom: 0.2em;
	margin-top: 0.2em;
}


.large {
	
	font-size: 24px;

}

.whitebg {

  background-color: white;
}


.container3 {
  margin: 0 auto;

  text-align: center;
  max-width: 400px;
  width:90%;
}
.container {
display: block;
position: relative;
padding-left: 25px;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
right: 0 !important;
left: 0 !important;
width: auto;
}

.checkarea2{
width: auto;
position: relative;
left: 0;
right: 0;
display: inline-block;
margin-bottom: 0.5em;
margin-top: 0.5em;
width: 80%;
}
  .checkmark {
    position: absolute;
    top: 3px;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #fff;
    border: 0.5px solid #665656;
  }
 .Boxlabel {
	 
	 margin-bottom: 0.0em;
	 margin-top: 0.2em;
 }
  
  /* On mouse-over, add a grey background color */
  .container:hover input ~ .checkmark {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .container input:checked ~ .checkmark {
    background-color: #28334A;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  /* Show the checkmark when checked */
  .container input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */

    .container .checkmark:after {
left: 4px;
top: 0px;
width: 5px;
height: 10px;
      border: solid white;
          border-top-width: medium;
          border-right-width: medium;
          border-bottom-width: medium;
          border-left-width: medium;
      border-width: 0 3px 3px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      }
  
  

  
.smallprint {
	
	font-size: 11px;
;
}

.Bodytext {
 font-family: Lato, Arial, Helvetica, sans-serif;
 		margin: 0.2em 0;
}

.light {
font-weight: 300;
}

.heavy {
font-weight: 400 !important;
}

.vheavy {
font-weight: 700 !important;
}

.center {
text-align: center;
}


.jumbo {

  font-size: 28px;
}
.heavysmall{

  font-size: 14px;
}
.Bluetext {
color:#28334A;
}

.orangetext {
color: #F25E43;
}

.greytext {
color: #4A4A44;
}

.whitetext {
color: #ffffff;
}

.bluebg {
	color:#28334A;
	
}

.link {

  color: white !important;
}

.link:visited {

  color: white !important;

}
.mainarea {


	background-image:url('file:///D:/pictures/qvc2/images/sprinklestopx2x.png'), url('file:///D:/pictures/qvc2/images/sprinkles2x.png');
	background-position:top, bottom;
	background-repeat:no-repeat, no-repeat;
background-attachment: fixed;

margin: auto;

background-size: 850px;


margin: 0 auto;

 
 

}

.mainareaalt {


	background-image:url('/images/TGQG-lose-background@2x.jpg');
	background-position:top;
	background-repeat:no-repeat;
background-attachment: fixed;

background-size: auto 120%;
margin: 0 auto;
background-position-y: 50%;


 
 

}
form {
	margin-top: 0.9em;
	margin-bottom: 0px;
	
	
}
.flymiddle {
	
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);

  height: auto;
display: inline-block;
max-width: 450px;
width: 95%;

}

.underimg {
	display:inline-block;
	position: absolute;
	
	margin-left: -50%;
}
.overimg {
	display:inline-block;
	
	position: absolute;
	margin-left: -50%;
	
animation:fadeout 11500ms;

opacity:0;
}


.logoimg {

  padding-top: 50px;
  padding-bottom: 30px;
}
.santa {
  transform: translate( -125vw, 100px )  ;
  animation: flysanta 20s infinite;
  animation-timing-function: linear;
  position: absolute;
}

@keyframes flysanta {
  0% {  transform: translate( -125vw, 200px )  }


    10% {  transform:  translate(-125vw, 200px) }


    
    65% {  transform:  translate(125vw, 100px) }

  100% {   transform: translate(125vw, 100px)  } 
}




@keyframes fadeout {
  0% { opacity:1;  }
  45% { opacity:1;   }
  70% { opacity:1;   }
    80% {  opacity: 0;  }


  100% {   opacity:0; } 
}

.hideover  {
	
	overflow: hidden;
}


@keyframes fadein2 {
  0% { height:0px; transform: scale(1, 1) translate(0px, 0px)  }

    80% {  height:0px;transform: scale(0.95, 0.95) translate(13px, -8px) }


  87% {   height:80px; transform: scale(2, 2) translate(-39px, 19px)  } 
}

.slice {
	
  transition-timing-function: ease-out;
	transform: scale(2, 2)  translate(-39px, 19px); 
	display:inline-block;
	width:143.65px;
	position: absolute;
	margin-right: -2px;
	animation: fadein2 11500ms;
	height:80px;
	top: 232px;

}

.cakebg {

  width: 296px;
  height: 296px;
  background-color: transparent;
  border-radius:50%;
  box-shadow: 30px 30px 30px 3px rgba(0, 0, 0, 0.35);
position: fixed;

animation:fadeout 11500ms;
opacity:0;
}

.tallermiddle {
	
	min-height: 470px;
}

.whiteborder {

  border: 5px solid white;
}

.fixedmiddle {
  left: 50%;
  transform: translate(-50%);
  position: relative;
  width: 85%;
  text-align: center;
  padding-top: 2em;

  max-width: 360px;
}
.bow  {

  margin-right: auto;
margin-left: auto;
margin-bottom: -24px;
padding-left: 170px;
}
/* .presentbutton {


  
  background-color: #8fb5be !important;
  background-image: radial-gradient(#c9e6ee 12%, transparent 0), radial-gradient(#c9e6ee 9%, transparent 0);
  background-size: 2em 2em;
  background-position: 0 0, 1em 1em;
  border: 1px solid #28334A !important;
  border-radius: 5px !important;
  color: #28334A !important;
  padding-bottom: 20px !important;
  padding-top: 20px !important;
  font-weight: 800 !important;
  box-shadow: 3px 3px 5px 3px #888888 !important;

} */

.minlock {
	
	min-height: 720px;
}


#container {
/*    
  height: calc(var(--vh, 1vh) * 100); 
   position:relative;
min-height: 550px; */

position: relative;
min-height: calc(var(--vh, 1vh) * 100);
}
.container2 {

  /* 
  min-height: calc(var(--vh, 1vh) * 100);  */
  position:relative;
margin-bottom: 50px;
max-width: 600px;
width: 95%;
margin-left: auto;
margin-right: auto;

}
#graph {
visibility: hidden;

}
#header {
   background:#ff0;
   padding:10px;
}
#body {
min-height: 500px;
    padding-bottom:3.25em  ;    
   /* Height of the footer */
}
.footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   

   text-align: center;
     margin-top: 2em;
  margin-bottom: 1.25em;
z-index: 1001;
z-index: 9;
}


input[type=checkbox] {
   -ms-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  padding-right: 10px; 
  background-color: white;
  visibility: hidden;
  display: none;
}
.Detailsbox {
     border: 1px solid #BCBCBC !important; 
    width: 220px !important;

    height: 26px !important;
	background-color: rgba (255,255,255,0.75);
    display: inline-block;
    font-size: 16px;
    text-align: center;
    max-width: 85%;


font-weight:400;
font-family: Lato, sans-serif;
color:#2c2f33;
margin-top: 0.1em;
margin-bottom: 0.3em;	
  border-radius: 0;
  -webkit-border-radius:0px;
}


.Smallbox {
     border: 1px solid #BCBCBC !important; 
    width: 100px !important;

    height: 22px !important;
	background-color: rgba (255,255,255,0.75);
    display: inline-block;
    font-size: 16px;
    text-align: center;
    max-width: 85%;



/*   border: 2px solid #e3f0fd; */
border:none;
font-weight:400;
font-family: Lato, sans-serif;
color:#2c2f33;
margin-top: 0.1em;
margin-bottom: 0.3em;	
	  border-radius: 0;
  -webkit-border-radius:0px;
}

input[type=button], input[type=submit], input[type=reset] {
font-family: Lato, TT Norms, Arial, Helvetica, sans-serif;
font-weight:400;
font-weight: bolder;

 width:auto;
 text-align:center;
 margin-bottom:0px;
color: #fff;

font-size: 16px;
margin-top: 5px;
max-width: 100%;
margin-left: auto;	
margin-right: auto;	
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
  border-radius: 0;

  padding: 15px 10px 15px 10px;

}

.linkbutton {

  font-family: Lato, TT Norms, Arial, Helvetica, sans-serif;
font-weight:400;

 width:auto;
 text-align:center;
 margin-bottom:0px;


font-size: 16px;
margin-top: 12px;
max-width: 100%;
margin-left: auto;	
margin-right: auto;	
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
  border-radius: 0;
  -webkit-border-radius:0px;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  display: block;
}
strong {

  font-weight: 600;
}

.bluebutton{


background-color:#28334A;
color: #fff;

}

.whitebutton{


  background-color:#ffff;
  color:  #28334A;
  
  }

input[type=button], input[type=submit], input[type=reset] :hover {

background-color:#0646BF;
cursor: pointer;

}



.subutton {
font-family: Lato, TT Norms, Arial, Helvetica, sans-serif;
font-weight:400;
padding:8px 12px;
 border: none;
 width:auto;
 text-align:center;
 margin-bottom:0px;
background-color:#28334A;
color: #fff;
font-weight: bolder;
font-size: 16px;
margin-top: 5px;
max-width: 100%;
margin-left: auto;	
margin-right: auto;	
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-decoration: none;
display: inline-block;
  border-radius: 0;
 
}

.help {

  font-size: 14px;
  z-index: 2;
  color: #28334A;
}

.help a {
	color: #28334A;
text-decoration: none;
}

@media only screen and (min-width: 920px) and (min-height: 350px) { 

.bg {

	background-position:right top,  right bottom;
	background-repeat:no-repeat, no-repeat;
background-attachment: fixed;
background-repeat: no-repeat;


}
 } 
 
 
@media only screen and (max-height: 550px) { 
 
 .mainarea {
    background-image:  url('file:///D:/pictures/qvc2/images/sprinkels2x.png');
    background-position:  center center;
    background-repeat:  no-repeat;
    background-attachment: fixed;
}


}

@media only screen and (min-height: 950px) { 
.bottomscroll {
	

height: 200px !important;

}


.mainareaalt {



background-size: auto 100%;




 
 

}
.fixedmiddle {
	
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);

  height: auto;
display: inline-block;
padding-top: 25px;
}
}

@media only screen and (max-height: 350px)  and (min-width: 920px)  { 
 
.bg {
	background-image:url('file:///D:/pictures/qvc2/images/TGQG-background-top-right@1x.png'), url('file:///D:/pictures/qvc2/images/TGQG-background-centre-left@1x.png');
	background-position:right top, left;
	background-repeat:no-repeat, no-repeat;


}
}


.whitelink {

  color: white;

}

/* new animation */
.termsx {
overflow-y: scroll;
padding: 10px;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
font-weight: 300;
font-size: 12px !important;
margin-bottom: 50px;
height: 60vh;
}
.flymiddlesmall {

  width: 95%;
margin-left: auto;
margin-right: auto;
z-index: 10;
position: inherit;
max-width: 400px;
}
.bottompad{
	height:140px;
	
}

.bottomscroll {
	
background: rgb(40,51,74);
background: linear-gradient(0deg, rgba(40,51,74,1) 25%, rgba(40,51,74,0) 100%);
margin-top: -150px;
width: 100%;
height: 150px;
z-index: 3;
left: 0;
position: absolute;

}




.middleterms {
	
	max-width: 700px;
	margin: auto;
}
.closelink {
	
	text-align: right;

		color: white !important;
		position: absolute;
		top: 12px;
		right: 12px;
	text-decoration: none;
	
	  content: "\00d7"; /* This will render the 'X' */
	    width: 32px;
  height: 32px;
}

.closelink:before, .closelink:after {
  position: absolute;
  left: 20px;
  content: ' ';
  height: 25px;
  width: 3px;
  background-color: white;
}
.closelink:before {
  transform: rotate(45deg);
}
.closelink:after {
  transform: rotate(-45deg);
}


.close-icon {
  position: sticky;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  margin-top: 10px;
}
.close-icon:before, .close-icon:after {
  position: absolute;
  left: 20px;
  content: ' ';
  height: 25px;
  width: 3px;
  background-color: white;
}
.close-icon:before {
  transform: rotate(45deg);
}
.close-icon:after {
  transform: rotate(-45deg);
}


    .modal-container {
        position:fixed;
        left:50%;
        transform:translate(-50%, calc(var(--vh, 1vh) * 100));

        background-color:#28334A;
 
		width: 100%;
    height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
        border-radius:2px;
        font-size: 25px;
        text-align: center;
        transition: transform 800ms; 
animation-timing-function: ease-in;
		z-index: 2;
		color: white;
		text-align: left;
		top: calc(var(--vh, 1vh) * 100);

    }
        
    .modal2:before {
        content:"";
        display: none;
        position: fixed;
        background-color: rgba(0,0,0,0);
        top:0;
        left:0;
        height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
        height: calc(var(--vh, 1vh) * 100);
        width:100%;
		z-index: 2;
    }
        
    .modal2:target .modal-container {
        transform:translate(-50%,  calc(var(--vh, 1vh) * -100));



    }
        
    .modal2:target:before {
        display:block;
    }
    
    ul {
      overflow: hidden;
      white-space: nowrap;
      padding: 0;

    }
    li {
      display: inline-block;
      font-size: 0.5em;
      list-style-type: none;
      padding: 1em;
      text-transform: uppercase;
      border: 3px solid #F25E43;
      width: 5em;
      background-color: #ecf8fb;
    }

.lander {

    padding: 0.5em;
    text-transform: uppercase;
    border: none;
    width: 5em;
    margin: 0;
  
}

    
    li span {
      display: block;
      font-size: 1.5rem;
    }
    
    .emoji {
      display: none;
      padding: 1rem;
    }
    
    .emoji span {
      font-size: 4rem;
      padding: 0 .5rem;
    }
    
    @media all and (max-width: 768px) {
      h1 {
        font-size: 2.5rem;
      }
      
      li {
        padding: .5rem;
        width: 5em;
      }
      
      li span {
        font-size: 1.8rem;
      }
    }


    
    /* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: .9em; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */

  width: 200px;



  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}


/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}
/* UNRELATED to tooltips */

/*jiggle*/
.parcel {
  margin-left: auto;
  margin-right: auto;
  -webkit-animation: jiggle 4.5s ease-in-out forwards infinite;
  animation: jiggle 4.5s ease-in-out forwards infinite;
  overflow-x: hidden;
  margin-bottom: -56px;
  z-index: -1;
  
  position: relative;
}



@-webkit-keyframes jiggle {
  0% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(0deg);
            transform: translate3d(0%, 0%, 0) rotate(0deg);

  }
  4% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(0deg);
            transform: translate3d(0%, 0%, 0) rotate(0deg);

  }
 
  9% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(2deg);
            transform: translate3d(0%, 0%, 0) rotate(2deg);

  }
  13% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(-2deg);
            transform: translate3d(0%, 0%, 0) rotate(-2deg);

  }
  18% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(2deg);
            transform: translate3d(0%, 0%, 0) rotate(2deg);

  }
  23% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(0deg);
            transform: translate3d(0%, 0%, 0) rotate(0deg);

  }
  28% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(2deg);
            transform: translate3d(0%, 0%, 0) rotate(2deg);

  }
  33% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(-2deg);
            transform: translate3d(0%, 0%, 0) rotate(-2deg);

  }
  38% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(2deg);
            transform: translate3d(0%, 0%, 0) rotate(2deg);

  }
  43% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(0deg);
            transform: translate3d(0%, 0%, 0) rotate(0deg);

  }
  100% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(0deg);
            transform: translate3d(0%, 0%, 0) rotate(0deg);

  }


}
@keyframes jiggle {
0% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(0deg);
            transform: translate3d(0%, 0%, 0) rotate(0deg);

  }
  4% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(0deg);
            transform: translate3d(0%, 0%, 0) rotate(0deg);

  }
 
  9% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(2deg);
            transform: translate3d(0%, 0%, 0) rotate(2deg);

  }
  13% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(-2deg);
            transform: translate3d(0%, 0%, 0) rotate(-2deg);

  }
  18% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(2deg);
            transform: translate3d(0%, 0%, 0) rotate(2deg);

  }
  23% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(0deg);
            transform: translate3d(0%, 0%, 0) rotate(0deg);

  }
  28% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(2deg);
            transform: translate3d(0%, 0%, 0) rotate(2deg);

  }
  33% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(-2deg);
            transform: translate3d(0%, 0%, 0) rotate(-2deg);

  }
  38% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(2deg);
            transform: translate3d(0%, 0%, 0) rotate(2deg);

  }
  43% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(0deg);
            transform: translate3d(0%, 0%, 0) rotate(0deg);

  }
  100% {
    -webkit-transform: translate3d(0%, 0%, 0) rotate(0deg);
            transform: translate3d(0%, 0%, 0) rotate(0deg);

  }


}

/*jiggle end*/
/*overlay style*/
.containercookie {

  display: block;
position: absolute;
padding-left: 15px;
padding-right: 15px;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
right: 0 !important;
left: 0 !important;
width: auto;
text-align: center;
z-index: 3;
padding-top: 20px;
padding-bottom: 20px;
background-color: white;
}


.acceptcookie {

  padding: 5px 10px;
color: white;
z-index: 5;
position: inherit;
border: none;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  background: -webkit-linear-gradient(to bottom , #6486c1 10%, #3d62a8 90%);
  background:    -moz-linear-gradient(to bottom , #6486c1 10%, #3d62a8 90%);
  background:     -ms-linear-gradient(to bottom , #6486c1 10%, #3d62a8 90%);
  background:      -o-linear-gradient(to bottom , #6486c1 10%, #3d62a8 90%);
  background:         linear-gradient(to bottom , #6486c1 10%, #3d62a8 90%);
  overflow-x: hidden;
  transition: 0.5s;
}




.overlay-content {
position: relative;
top: 4%;

text-align: center;
margin-top: 10px;
margin-left: 15px;
margin-right: 15px;
}

.overlay a {
  padding: 8px;
  color: #fff;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;

  right: 5px;
  top: 5px;
  font-size: 30px;
  z-index:4;
}

/*end overlay style*/

/*box*/



.present {
  height: 200px;
  left: 0;
  margin: 0 auto;
  perspective: 600px;
  position: absolute;
  right: 0;
/*   top: 50%;
  transform: translateY(-50%); */
  width: 200px;
  margin-top: 95px;
  
}

.name {
  font-size: 1.2em;
  font-weight: 100;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate3d(-50px, -150px, 0) rotateY(0) rotateX(0) scale(0.4);
  
  transition: transform 2.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  width: 300px;
  text-shadow:
   -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
     1px 1px 0 #fff;
	 font-weight: bolder;
background: white;
background-image:url('/images/candy.png');
    padding: 25px 20px 25px 20px;;
	
  background-size: auto 50%;
  background-position: right;
  background-repeat: no-repeat;
}

.showform {
	
	visibility: visible;
  transform: translateY(-80px) translateX(-50%);
  -webkit-animation: revealform 5.5s;
          animation: revealform 5.5s;
}
.showformi {
	
  transform: translateY(-80px) translateX(-50%);
	visibility: visible;
}

.hideform {
	
	visibility: hidden;

}
.hidetitle {
	
	visibility: hidden;

}


@-webkit-keyframes revealform {
  0% {
    visibility:hidden;
	opacity: 0;
  transform: translateX(-50%);
  }
  90% {
    visibility: visible;
	
	opacity: 0;
  
  transform: translateX(-50%);
  }
  100% {
	  
    visibility:visible;
	opacity: 1;
  transform: translateY(-80px) translateX(-50%);
  }
}


@keyframes revealform {
  0% {
    visibility:hidden;
	opacity: 0;
  transform: translateX(-50%);
  }
  90% {
    visibility: visible;
	
	opacity: 0;
  
  transform: translateX(-50%);
  }
  100% {
	  
    visibility:visible;
	opacity: 1;
  transform: translateY(-80px) translateX(-50%);
  }
}


.instruction {
	
  font-size: 1.75em;
  left: 0;
  opacity: 1;
  position: absolute;
  text-align: center;
  transition: opacity 0.5s;
  width: 100%;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
  font-weight: bolder;
  margin-top: 10px;
  z-index: 2;
}

.rotate-container {
  -webkit-animation: present-rotate 30s infinite linear;
          animation: present-rotate 30s infinite linear;
  height: 100%;
  transform: rotateY(170deg);
  transform-style: preserve-3d;
}

@-webkit-keyframes present-rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes present-rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}
.bottom,
.front,
.left,
.back,
.right {
  background-color: #b90404;
  border: 3px solid rgba(0, 0, 0, 0.7);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.bottom {
  transform: translateY(50%) rotateX(90deg);
}

.front,
.left,
.back,
.right {
  transition: transform 0.5s;
  transform-origin: bottom;
  transform-style: preserve-3d;
}

.front:after,
.left:after,
.back:after,
.right:after,
.lid-top:after,
.lid-front:after,
.lid-left:after,
.lid-back:after,
.lid-right:after {
  background-color: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  content: "";
  height: 100%;
  left: calc(50% - 10px);
  position: absolute;
  transform: translateZ(0.1px);
  width: 20px;
}

.lid-top:before {
  background-color:white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  content: "";
  height: 20px;
  left: 0;
  position: absolute;
  top: calc(50% - 10px);
  transform: translateZ(0.1px);
  width: 100%;
}

.left {
  transform: translateX(-50%) rotateY(-90deg);
}

.back {
  transform: translateZ(-100px) rotateY(180deg) rotateX(0);
}

.right {
  transform: translateX(50%) rotateY(90deg);
}

.front {
  transform: translateZ(100px);
}

.lid {
  -webkit-animation: lid-animation 3.5s 1s infinite;
          animation: lid-animation 3.5s 1s infinite;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

@-webkit-keyframes lid-animation {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0);
  }
  5% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  10% {
    transform: translate3d(0, -10px, 5px) rotateX(-5deg);
  }
  15% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  20% {
    transform: translate3d(0, -10px, 5px) rotateX(-5deg);
  }
  25% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  30% {
    transform: translate3d(0, 0, 0) rotateX(0);
  }
}

@keyframes lid-animation {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0);
  }
  5% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  10% {
    transform: translate3d(0, -10px, 5px) rotateX(-5deg);
  }
  15% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  20% {
    transform: translate3d(0, -10px, 5px) rotateX(-5deg);
  }
  25% {
    transform: translate3d(0, -10px, -5px) rotateX(5deg);
  }
  30% {
    transform: translate3d(0, 0, 0) rotateX(0);
  }
}
.lid-top,
.lid-left,
.lid-back,
.lid-right,
.lid-front {
  background-color: #b90404;
  border: 3px solid rgba(0, 0, 0, 0.7);
  left: -5px;
  opacity: 1;
  position: absolute;
  top: 0;
  width: 210px;
}

.lid-top {
  height: 210px;
  top: -5px;
  transform: translateY(-50%) rotateX(90deg);
  transform-style: preserve-3d;
}

.lid-left,
.lid-back,
.lid-right,
.lid-front {
  height: 40px;
  top: -5px;
  transform-style: preserve-3d;
}

.lid-left {
  transform: translateX(-50%) rotateY(-90deg);
}

.lid-back {
  transform: translateZ(-105px) rotateY(180deg);
}

.lid-right {
  transform: translateX(50%) rotateY(90deg);
}

.lid-front {
  transform: translateZ(105px);
}

.present:hover .lid {
  -webkit-animation: none;
          animation: none;
  transform: translate3d(0, -40px, -10px) rotateX(10deg);
}

.present.open .name {
  transform: translate3d(-50px, -150px, -50px) rotateY(1080deg) scale(1);
  

}
.present.open .instruction {
  opacity: 0;
}
.present.open .left {
  transform: translateX(-50%) rotateY(-90deg) rotateX(-90deg);
  opacity: 0;
  
animation:fadeout 2000ms;
}
.present.open .back {
  transform: translateZ(-100px) rotateY(180deg) rotateX(-90deg);
  opacity: 0;
  
animation:fadeout 2000ms;
}
.present.open .right {
  transform: translateX(50%) rotateY(90deg) rotateX(-90deg);
  opacity: 0;
  
animation:fadeout 2000ms;
}
.present.open .front {
  transform: translateZ(100px) rotateX(-90deg);
  opacity: 0;
  
animation:fadeout 2000ms;
}
.present.open *.lid {
  -webkit-animation: none;
          animation: none;

  transform: translatex(-200vw);
  
}
.present.open .bottom {

  opacity: 0;
  animation:fadeout 2000ms;
}

.present.open .lid.lid-top {

  opacity: 0;
  
  animation:fadeout 3500ms;
}
.present.open .lid-top {

  opacity: 0;
  
  animation:fadeout 3500ms;
}
.present.open .lid-left {

  opacity: 0;
  
  animation:fadeout 3500ms;
}
.present.open .lid-right {

  opacity: 0;
  
  animation:fadeout 3500ms;
}
.present.open .lid-front {

  opacity: 0;
  
  animation:fadeout 3500ms;
}
.present.open .lid-back {

  opacity: 0;
  
  animation:fadeout 3500ms;
}

canvas {
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  overflow: hidden;
}

/*end box*/

/*anim border*/

.cp-btn {
  
}
.cp-btn:before {
  content: "";
  position: absolute;
  animation: rainbow-border 1.5s linear infinite;

  background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73, #0ebeff, #ffdd40, #ae63e4, #47cf73);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: 200% 200%;
}
.cp-btn:before {
  bottom: 0;
}
 .cp-btn:after {
  content: "";
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  width: auto;
  z-index: -1;
  border-radius: 3px;
  margin: 3px;
  background: inherit;
}


@keyframes rainbow-border {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
@-webkit-keyframes rainbow-border {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/*end anim border*/