body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #002902 url('img/xmas-2023.jpg') top center no-repeat fixed;
	background-size:cover;
}


* 
{
	font-family: 'Mountains of Christmas', Calibri, Arial, Sans-Serif;
		font-weight: 700;
		font-size: 12px;
		color: White;
}

#container
{
	position: relative;
	width: 970px;
	clear: both;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
}

.list, .action, #footer
{
		clear: both;
		padding: 40px 0;
}

.action 
{
	padding: 20px;
		
}

ul.list 
{
	position: relative;
	padding: 0!important;
	margin: 0 0 40px;	
}

.list li
{
	position: relative;
	float:left;
    width: 320px;
}








h1
{

	font-size: 68px;
	
}

h2 {font-size: 48px;}

.button
{
	display: inline-block;
    width: 96px;
    height: 96px;
	border-radius: 48px;
	font-size: 28px;
    line-height: 96px;
	color: #fff;
	text-decoration: none;
    margin-right: 16px;
	background: #d3110a; /* Old browsers */
	background: -moz-linear-gradient(top, #d3110a 0%, #d30a0a 49%, #c10909 50%, #9b0707 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3110a), color-stop(49%,#d30a0a), color-stop(50%,#c10909), color-stop(100%,#9b0707)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(top, #d3110a 0%,#d30a0a 49%,#c10909 50%,#9b0707 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #d3110a 0%,#d30a0a 49%,#c10909 50%,#9b0707 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #d3110a 0%,#d30a0a 49%,#c10909 50%,#9b0707 100%); /* IE10+ */
	background: linear-gradient(to bottom, #d3110a 0%,#d30a0a 49%,#c10909 50%,#9b0707 100%); /* W3C */
}
    .button:last-child {
        margin-right: 0;
    }

.button:hover
{
background: #ff0c0c; /* Old browsers */
background: -moz-linear-gradient(top, #ff0c0c 0%, #ea0f0b 49%, #db230a 50%, #ad080b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0c0c), color-stop(49%,#ea0f0b), color-stop(50%,#db230a), color-stop(100%,#ad080b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff0c0c 0%,#ea0f0b 49%,#db230a 50%,#ad080b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff0c0c 0%,#ea0f0b 49%,#db230a 50%,#ad080b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff0c0c 0%,#ea0f0b 49%,#db230a 50%,#ad080b 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff0c0c 0%,#ea0f0b 49%,#db230a 50%,#ad080b 100%); /* W3C */	
}



#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }


@keyframes pendulum {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(10deg); }
    75% { transform: rotate(-10deg); }
}
.gift {
      height: 160px;
    width: 288px;  
    -webkit-animation: pendulum 3s linear 110ms infinite normal;
    transform-origin: 50% 0;
    position: relative;
    opacity:1;
    
}
.bow {
    height: 48px;
    width: 96px;
    left: 96px;
    top:0;
    z-index: 100;
    position: absolute;
    transform: rotate(180deg);   
}

.box {
    top: 32px;
    position: absolute;
    -webkit-perspective: 600px; /* so you get the 3d effect */
    height: 96px;
    width: 288px;
    padding: 0 0;
    position: relative;
}


.actual {position:absolute;left: 96px}
.side {
    height: 96px;
    width: 96px;
    position: absolute;
    box-sizing: border-box;
}


.face {
    background-color: #fff;
}
.box .left, .box .right {
    -webkit-transition-duration: 0.75s;
    -webkit-transform-origin: 0 0;
    -webkit-transform-style: preserve-3d; /* otherwise the perspective gets erased, and you lose the 3d */
   
}

.box .left {
    z-index: 3;
    transition-delay: 0.5s;
}

.box .right {
    -webkit-transform-origin: 100% 0;
    z-index: 2;
    transition-delay: 0;
}

.left .outside,
.left .inside,
.right .outside,
.right .inside{
    position: absolute;
    -webkit-backface-visibility: hidden; /* makes it so that the elements only have a front side */
}


.box .inside {
    -webkit-transform: rotateY(180deg); /* flips the top-inside so its back touches the fronts back */
    line-height: 96px;
    text-align:center;
    font-size: 28px;
}

.mid {
    z-index: 1;
    padding: 12px;
    
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center; 
}

.mid span {
    opacity: 0.6;
    font-size: 18px;
}
.giftee, .gifter {text-shadow:0 0 3px #000;}
.gift.open   .left {
    transition-delay: 0s;
    -webkit-transform: rotateY(-180deg); /*rotates the entire front (with the in- and outsides in it) if the class 'open' is added to the card */
}

.gift.open   .right {
    transition-delay: 0.5s;
    -webkit-transform: rotateY(180deg); /*rotates the entire front (with the in- and outsides in it) if the class 'open' is added to the card */
}

.hide {
    animation: fadeout 1s infinite;
}

.gift .bow {stroke-opacity:0.7;}

.g1 .wrap {fill:#BF2FA3;} .g1.gift .bow {fill: #BF2FA3;} .g1 .face{background-color: #FF3FDA;} .g1 .face.mid {background-color: #7F1F6D;}
.g2 .wrap {fill:#49CAFF;} .g2.gift .bow {fill: #49CAFF;} .g2 .face{background-color: #42B6E5;} .g2 .face.mid {background-color: #24657F;}
.g3 .wrap {fill:#38BF19;} .g3.gift .bow {fill: #38BF19;} .g3 .face{background-color: #4BFF21;} .g3 .face.mid {background-color: #257F10;}
.g4 .wrap {fill:#BABF28;} .g4.gift .bow {fill: #BABF28;} .g4 .face{background-color: #DFE530;} .g4 .face.mid {background-color: #7C7F1B;}
.g5 .wrap {fill:#BF001E;} .g5.gift .bow {fill: #BF001E;} .g5 .face{background-color: #FF0028;} .g5 .face.mid {background-color: #7F0014;}
.g6 .wrap {fill:#00BF1C;} .g6.gift .bow {fill: #00BF1C;} .g6 .face{background-color: #00FF25;} .g6 .face.mid {background-color: #007F13;}
.g7 .wrap {fill:#3945BF;} .g7.gift .bow {fill: #3945BF;} .g7 .face{background-color: #4C5CFF;} .g7 .face.mid {background-color: #262E7F;}
.g8 .wrap {fill:#BF0D8C;} .g8.gift .bow {fill: #BF0D8C;} .g8 .face{background-color: #FF11BB;} .g8 .face.mid {background-color: #7F095E;}
.g9 .wrap {fill:#3EBF91;} .g9.gift .bow {fill: #3EBF91;} .g9 .face{background-color: #53FFC1;} .g9 .face.mid {background-color: #297F60;}
.g10 .wrap {fill:#3EBF91;} .g10.gift .bow {fill: #3EBF91;} .g10 .face{background-color: #53FFC1;} .g10 .face.mid {background-color: #297F60;}

@keyframes fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}