@import url('https://fonts.googleapis.com/css?family=Orbitron');

@font-face {
    font-family: 'Digital Numbers';
    src: url('../fonts/DigitalNumbers-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Alarm Clock';
    src: url('../fonts/alarm clock.ttf') format('truetype');
}

@font-face {
    font-family: 'Christbaumkugeln';
    src: url('../fonts/Christbaumkugeln.ttf') format('truetype');
}

@font-face {
    font-family: 'Kingthings Christmas';
    src: url('../fonts/Kingthings Christmas.ttf') format('truetype');
}

@font-face {
    font-family: 'Dream Love Valentine Regular';
    src: url('../fonts/Dream Love Valentine Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'ILoveYOUForever';
    src: url('../fonts/ILoveYOUForever.ttf') format('truetype');
}

@font-face {
    font-family: 'Eggs';
    src: url('../fonts/Eggs.ttf') format('truetype');
}

@font-face {
    font-family: 'Happy Easter';
    src: url('../fonts/Happy Easter.ttf') format('truetype');
}

@font-face {
    font-family: 'Josefin Sans Regular';
    src: url('../fonts/JosefinSansRegular.ttf') format('truetype');
}

@font-face {
    font-family: 'Nunito Regular';
    src: url('../fonts/NunitoRegular.ttf') format('truetype');
}

@font-face {
    font-family: 'Haettenschweiler Regular';
    src: url('../fonts/Haettenschweiler.ttf') format('truetype');
}

/* Analog Clock Design*/
.iwc-container
{
    width: 200px;
    margin: 40px auto;
}

#clock1 
{
    position: relative;
    background-image: url('../images/bg/clock_bg1.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock1 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour1.png');
    height: 60px;
    width: 8px;
    background-size: 8px 60px;
    transform-origin: 50% 65%;
}

#clock1 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min1.png');
    height: 91px;
    width: 8px;
    background-size: 8px 91px;
    transform-origin: 50% 74%;
}

#clock1 .s-hand
{
    position: absolute;
    left: 93px;
    top: 32px;
    background-image: url('../images/hand/sec1.png');
    height: 93px;
    width: 16px;
    background-size: 16px 93px;
    transform-origin: 45% 73%;
    
}

#clock2
{
    position: relative;
    background-image: url('../images/bg/clock_bg2.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock2 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour2.png');
    height: 60px;
    width: 8px;
    background-size: 8px 60px;
    transform-origin: 50% 60%;
}

#clock2 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min2.png');
    height: 92px;
    width: 8px;
    background-size: 8px 92px;
    transform-origin: 50% 72%;
}

#clock2 .s-hand
{
    position: absolute;
    left: 93px;
    top: 32px;
    background-image: url('../images/hand/sec2.png');
    height: 93px;
    width: 16px;
    background-size: 16px 93px;
    transform-origin: 45% 74%;
    
}

#clock3 
{
    position: relative;
    background-image: url('../images/bg/clock_bg3.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock3 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour3.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock3 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min3.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}

#clock3 .s-hand
{
    position: absolute;
    left: 94.5px;
    top: 37px;
    background-image: url('../images/hand/sec3.png');
    height: 75px;
    width: 12px;
    background-size: 12px 75px;
    transform-origin: 45% 85%;
    
    
}

#clock4 
{
    position: relative;
    background-image: url('../images/bg/clock_bg4.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock4 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour4.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock4 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min4.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}

#clock4 .s-hand
{
    position: absolute;
    left: 94.5px;
    top: 37px;
    background-image: url('../images/hand/sec4.png');
    height: 75px;
    width: 12px;
    background-size: 12px 75px;
    transform-origin: 45% 85%;
    
    
}

#clock5 
{
    position: relative;
    background-image: url('../images/bg/clock_bg5.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock5 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour5.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock5 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min5.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}

#clock5 .s-hand
{
    position: absolute;
    left: 94.5px;
    top: 37px;
    background-image: url('../images/hand/sec5.png');
    height: 75px;
    width: 12px;
    background-size: 12px 75px;
    transform-origin: 45% 85%;
    
    
}

#clock6
{
    position: relative;
    background-image: url('../images/bg/clock_bg6.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock6 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour6.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock6 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min6.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}

#clock6 .s-hand
{
    position: absolute;
    left: 94.5px;
    top: 37px;
    background-image: url('../images/hand/sec6.png');
    height: 75px;
    width: 12px;
    background-size: 12px 75px;
    transform-origin: 45% 85%;
}

#clock7
{
    position: relative;
    background-image: url('../images/bg/clock_bg7.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock7 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour1.png');
    height: 60px;
    width: 8px;
    background-size: 8px 60px;
    transform-origin: 50% 60%;
}

#clock7 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min1.png');
    height: 92px;
    width: 8px;
    background-size: 8px 92px;
    transform-origin: 50% 72%;
}

#clock7 .s-hand
{
    position: absolute;
    left: 93px;
    top: 32px;
    background-image: url('../images/hand/sec2.png');
    height: 93px;
    width: 16px;
    background-size: 16px 93px;
    transform-origin: 45% 74%;
    
}

#clock8
{
    position: relative;
    background-image: url('../images/bg/clock_bg8.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock8 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour6.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock8 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min6.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}

#clock8 .s-hand
{
    position: absolute;
    left: 94.5px;
    top: 37px;
    background-image: url('../images/hand/sec6.png');
    height: 75px;
    width: 12px;
    background-size: 12px 75px;
    transform-origin: 45% 85%;
}

#clock9
{
    position: relative;
    background-image: url('../images/bg/clock_bg9.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock9 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour7.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock9 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min7.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}

#clock9 .s-hand
{
    position: absolute;
    left: 94.5px;
    top: 37px;
    background-image: url('../images/hand/sec3.png');
    height: 75px;
    width: 12px;
    background-size: 12px 75px;
    transform-origin: 45% 85%;
}

#clock10
{
    position: relative;
    background-image: url('../images/bg/clock_bg10.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock10 .h-hand
{
    position: absolute;
    left: 96px;
    top: 64px;
    background-image: url('../images/hand/hour8.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 90%;
}

#clock10 .m-hand
{
    position: absolute;
    left: 96px;
    top: 39px;
    background-image: url('../images/hand/min8.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 85%;
}


/* Digital Clock Design*/
.iwc-container2
{
    width: 220px;
    margin: 40px auto;
}

.colon {
    width: 12px;
    text-align: center;
    animation: blink 4s infinite;
}

@keyframes blink {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    50%  { opacity: 0; }
    70%  { opacity: 1; }
    100% { opacity: 0; }
}

.iwc-span {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: $color-3;
    text-shadow: 0 0 15px rgba($color-3,0.4);
    line-height: 1.75;
}
.iwc-span2 {
    position: relative;
    display: flex;
    flex-direction: column; 
    float: left;
    align-items: center;
    justify-content: center;
    color: $color-3;
    text-shadow: 0 0 15px rgba($color-3,0.4);
    line-height: 0.89;
}

#clock11,#clock12,#clock13,#clock14,#clock17,#clock18,#clock21,#clock22,#clock25,#clock26,#clock34,#clock35,#clock36,#clock37,#clock38{
    position: relative;
    height: auto;

}

#clock11 .time {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 15px 15px;
        background-color: #0f3854;
        border-radius: 10px;
        font-family: 'Orbitron', san-serif;
        font-size: 33px;
        color:white;
        text-shadow: 0 0 20px rgba(10, 175, 230, 1),  0 0 20px rgba(10, 175, 230, 0);
        overflow: hidden;
}

#clock11 .session{
    position:absolute;
    bottom:18px;
    right:15px;
    font-size:8px;
    color:white;
    font-family: 'Orbitron', san-serif;
    
}

#clock11 .week{
    position:absolute;
    top:23px;
    left:15px;
    font-size:8px;
    color:white;
    font-family: 'Orbitron', san-serif;
    z-index:1;
}


#clock12 .time {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 15px 15px;
        background-color: #dcf3f9;
        border-radius: 10px;
        font-family: 'Orbitron', san-serif;
        font-size: 33px;
        color:#0f3854;
        text-shadow: 0 0 20px rgba(44,149, 196, 1),  0 0 20px rgba(44, 149, 196, 0);
        overflow: hidden;
}

#clock12 .session{
    position:absolute;
    bottom:16px;
    right:15px;
    font-size:8px;
    color:#0f3854;
    font-family: 'Orbitron', san-serif;
    
}

#clock12 .week{
    position:absolute;
    top:23px;
    left:15px;
    font-size:8px;
    color:#0f3854;
    font-family: 'Orbitron', san-serif;
    z-index:1;
}

#clock13 .time {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 15px 15px;
        background-color: black;
        border-radius: 10px;
        font-family: 'Digital Numbers';
        font-size: 30px;
        color:#3dd6e2;
        text-shadow: 0 0 20px rgba(85,251, 255, 1),  0 0 20px rgba(85, 251, 255, 0);
        overflow: hidden;
}

#clock13 .week{
    position:absolute;
    bottom:35px;
    left:5px;
    font-size:7px;
    color:#3dd6e2;
    font-family: 'Digital Numbers', san-serif;
    
}

#clock13 .session{
    position:absolute;
    top:37px;
    right:9px;
    font-size:7px;
    color:#3dd6e2;
    font-family: 'Digital Numbers', san-serif;
    
}

#clock14 .time {
        position: relative;
        display: flex;
        align-items: left;
        justify-content: left;
        padding: 5px 8px 5px 28px;
        background-color: #6a61c9;
        border-radius: 10px;
        font-family: 'Alarm Clock';
        font-size: 43px;
        color:white;
        text-shadow: 0 0 20px rgba(85,251, 255, 1),  0 0 20px rgba(85, 251, 255, 0);
        overflow: hidden;
}

#clock14 .week{
    position:absolute;
    top:26px;
    left:6px;
    font-size:10.5px;
    color:white;
    font-family: 'Alarm Clock', san-serif;
    
}

#clock14 .session{
    position:absolute;
    bottom:27px;
    left:6px;
    font-size:10.5px;
    color:white;
    font-family: 'Alarm Clock', san-serif;
    
}

/*Seasonal Design for Christmas*/
/*Seasonal Analog Clock Design*/
#clock15
{
    position: relative;
    background-image: url('../images/bg/clock_bg11.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock15 .h-hand
{
    position: absolute;
    left: 96px;
    top: 73.2px;
    background-image: url('../images/hand/hour9.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock15 .m-hand
{
    position: absolute;
    left: 96px;
    top: 45px;
    background-image: url('../images/hand/min9.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}

#clock15 .s-hand
{
    position: absolute;
    left: 94.5px;
    top: 49px;
    background-image: url('../images/hand/sec7.png');
    height: 75px;
    width: 12px;
    background-size: 12px 75px;
    transform-origin: 45% 85%;
    
    
}

#clock16
{
    position: relative;
    background-image: url('../images/bg/clock_bg12.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock16 .h-hand
{
    position: absolute;
    left: 100px;
    top: 59.2px;
    background-image: url('../images/hand/hour10.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock16 .m-hand
{
    position: absolute;
    left: 100px;
    top: 27px;
    background-image: url('../images/hand/min10.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}

/*Seasonal Digital Clock Design*/
#clock17 .time {
        position: relative;
        display: flex;
        align-items: left;
        justify-content: left;
        padding: 10px 5px 10px 30px;
        background-color: #E53939;
        border-radius: 10px;
        font-family: 'Christbaumkugeln';
        font-size: 40px;
        color:white;
        text-shadow: 0 0 15px rgba(232,146, 146, 1),  0 0 15px rgba(232, 146, 146, 0);
        overflow: hidden;
}
#clock17 .colon {
         font-family: 'Alarm Clock';

}

#clock17 .week{
    position:absolute;
    top:26px;
    left:6px;
    font-size:10.5px;
    color:#fff;
    font-family: 'Alarm Clock', san-serif;
    
}

#clock17 .session{
    position:relative;
    bottom:43px;
    left:6px;
    font-size:10.5px;
    color:#fff;
    font-family: 'Alarm Clock', san-serif;
    
}

#clock18 .time {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 35px 10px;
        background-color: #64C8D2;
        border-radius: 10px;
        font-family: 'Kingthings Christmas', san-serif;
        font-size: 40px;
        color:#fff;
        text-shadow: 0 0 20px rgba(44,149, 196, 1),  0 0 20px rgba(44, 149, 196, 0);
        overflow: hidden;
        
}

#clock18 .session{
    position:relative;
    bottom:26px;
    left:185px;
    font-size:8px;
    color:#fff;
    font-family: 'Orbitron', san-serif;
    
}

#clock18 .week{
    position:absolute;
    top:25px;
    left:15px;
    font-size:8px;
    color:#fff;
    font-family: 'Orbitron', san-serif;
    z-index:1;
}

/*Seasonal Design for Valentine - Analog Clock*/
#clock19
{
    position: relative;
    background-image: url('../images/bg/clock_bg13.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock19 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour11.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock19 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min11.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}

#clock20
{
    position: relative;
    background-image: url('../images/bg/clock_bg14.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock20 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour12.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock20 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min12.png');
    height: 73px;
    width: 8px;
    background-size: 8px 73px;
    transform-origin: 50% 95%;
}


/*Seasonal Design for Valentine - Digital Clock*/
#clock21 .time {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 30px 10px;
        background-color: #F6D5CF; 
        text-shadow: 0 0 20px #E52C61,  0 0 20px #E52C61; 
        border-radius: 10px;
        font-family: 'Dream Love Valentine Regular';
        font-size: 40px;
        color:#fff;
        overflow: hidden;
}
#clock21 .colon {
         font-family: 'Dream Love Valentine Regular';

}

#clock21 .week{
    position:absolute;
    top:26px;
    left:6px;
    font-size:10px;
    color:#E52C61;
    font-family: 'Orbitron', san-serif;
    
    
}

#clock21 .session{
    position:relative;
    bottom:45px;
    left:6px;
    font-size:10px;
    color:#E52C61;
    font-family: 'Orbitron', san-serif;
    
    
}

#clock22 .time {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 35px 10px 30px;
         background-image: linear-gradient(50deg,#EF4C59,#D18FC5); 
        border-radius: 10px;
        font-family: 'ILoveYOUForever', san-serif;
        font-size: 40px;
        color:#fff;
        overflow: hidden;
}

#clock22 .session{
    position:relative;
    bottom:50px;
    left:187px;
    font-size:8.5px;
    color:#fff;
    font-family: 'Orbitron', san-serif;
    
}

#clock22 .week{
    position:absolute;
    top:43.3px;
    left:13px;
    font-size:8.5px;
    color:#fff;
    font-family: 'Orbitron', san-serif;
    z-index:1;
}

/*Seasonal Design for Easter - Analog Clock*/
#clock23
{
    position: relative;
    background-image: url('../images/bg/clock_bg15.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock23 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour10.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock23 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min10.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}
#clock24
{
    position: relative;
    background-image: url('../images/bg/clock_bg16.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock24 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour13.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock24 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min13.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}

/*Seasonal Design for Easter - Digital Clock*/
#clock25 .time {
        position: relative;
        display: flex;
        align-items: left;
        justify-content: left;
        padding: 17px 10px 17px 36px;
        background-color: #FBF1B9;
        border-radius: 10px;
        font-family: 'Happy Easter';
        font-size: 30px;
        color:#F08B20;
        /*text-shadow: 0 0 15px rgba(232,146, 146, 1),  0 0 15px rgba(232, 146, 146, 0);*/
        overflow: hidden;
}
#clock25 .colon {
         font-family: 'Alarm Clock';

}

#clock25 .week{
    position:absolute;
    top:25px;
    left:6px;
    font-size:11.5px;
    color:#F08B20;
    font-family: 'Alarm Clock', san-serif;
    
}

#clock25 .session{
    position:relative;
    bottom:43px;
    left:6px;
    font-size:11.5px;
    color:#F08B20;
    font-family: 'Alarm Clock', san-serif;
    
}

#clock26 .time {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px 10px 5px;
    background-color: #CFABD0;
    border-radius: 10px;
    font-family: 'Eggs','Arial', san-serif;
    font-size: 38px;
    color:#fff;
    text-shadow: 0 0 20px #BB8CBF,  0 0 20px #BB8CBF;
    overflow: hidden;
    bottom:-7px;
}
#clock26 .time .colon {
        top:-7px;
        font-family: 'Orbitron', san-serif;
        font-size: 30px;
}

#clock26 .session{
    position:relative;
    bottom:26px;
    left:185px;
    font-size:9px;
    color:#fff;
    font-family: 'Orbitron', san-serif;
    
}

#clock26 .week{
    position:absolute;
    top:22px;
    left:15px;
    font-size:9px;
    color:#fff;
    font-family: 'Orbitron', san-serif;
    z-index:1;
}

/*Classic Analog Clock Design*/
#clock27 
{
    position: relative;
    background-image: url('../images/bg/clock_bg17.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock27 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour14.png');
    height: 60px;
    width: 13px;
    background-size: 13px 60px;
    transform-origin: 50% 65%;
}

#clock27 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min14.png');
    height: 91px;
    width: 10px;
    background-size: 10px 91px;
    transform-origin: 50% 74%;
}

#clock28 
{
    position: relative;
    background-image: url('../images/bg/clock_bg18.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock28 .h-hand
{
    position: absolute;
    left: 95px;
    top: 33px;
    background-image: url('../images/hand/hour15.png');
    height: 65px;
    width: 17px;
    background-size: 17px 65px;
    transform-origin: 45% 95%;
}

#clock28 .m-hand
{
    position: absolute;
    left: 98px;
    top: 5px;
    background-image: url('../images/hand/min15.png');
    height: 95px;
    width: 14px;
    background-size: 14px 95px;
    transform-origin:45% 95%;
}

/*Mid Autumn Analog Clock Design*/
#clock29
{
    position: relative;
    background-image: url('../images/bg/clock_bg19.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock29 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour16.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock29 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min16.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}

#clock30
{
    position: relative;
    background-image: url('../images/bg/clock_bg20.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock30 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour17.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock30 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min17.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}

#clock31
{
    position: relative;
    background-image: url('../images/bg/clock_bg21.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock31 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour18.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock31 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min18.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}

#clock32
{
    position: relative;
    background-image: url('../images/bg/clock_bg22.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock32 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour19.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock32 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min19.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}

#clock33
{
    position: relative;
    background-image: url('../images/bg/clock_bg23.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock33 .h-hand
{
    position: absolute;
    left: 96px;
    top: 63.2px;
    background-image: url('../images/hand/hour20.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock33 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min20.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}

/*Mid Autumn Digital Clock Design*/
#clock34 .time {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 15px 10px 35px;
    background-image: url('../images/bg/dclock_bg1.png');
    border-radius: 10px;
    font-family: 'Josefin Sans Regular', san-serif;
    font-size: 38px;
    color:#fff;
    overflow: hidden;
    bottom:-7px;
}
#clock34 .time .colon {
    top:-7px;
    font-family: 'Josefin Sans Regular', san-serif;
    font-size: 30px;
}

#clock34 .session{
    position:relative;
    bottom:26px;
    left:185px;
    font-size:10px;
    color:#fff;
    font-family: 'Josefin Sans Regular', san-serif;
}

#clock34 .week{
    position:absolute;
    top:25px;
    left:15px;
    font-size:10px;
    color:#fff;
    font-family: 'Josefin Sans Regular', san-serif;
    z-index:1;
}

#clock35 .time {
    position: relative;
    display: flex;
    align-items: left;
    justify-content: left;
    padding: 17px 40px 17px;
    background-image: url('../images/bg/dclock_bg2.png');
    border-radius: 10px;
    font-family: 'Nunito Regular';
    font-size: 31px;
    color:#FFFFFF;
    text-shadow: 0 0 15px rgba(232,146, 146, 1),  0 0 15px rgba(232, 146, 146, 0);
     overflow: hidden;
}
#clock35 .colon {
    font-family: 'Nunito Regular';

}

#clock35 .week{
    position:absolute;
    top:25px;
    left:12px;
    font-size:9px;
    color:#FFFFFF;
    font-family: 'Nunito Regular', san-serif;
}

#clock35 .session{
    position:relative;
    bottom:43px;
    left:12px;
    font-size:9px;
    color:#FFFFFF;
    font-family: 'Nunito Regular', san-serif;
}

#clock36 .time {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 35px 10px;
    background-image: url('../images/bg/dclock_bg3.png');
    border-radius: 10px;
    font-family: 'Josefin Sans Regular', san-serif;
    font-size: 38px;
    color:#825644;
    overflow: hidden;
    bottom:-7px;
}
#clock36 .time .colon {
    top:-7px;
    font-family: 'Josefin Sans Regular', san-serif;
    font-size: 30px;
}

#clock36 .session{
    position:relative;
    bottom:26px;
    left:185px;
    font-size:10px;
    color:#825644;
    font-family: 'Josefin Sans Regular', san-serif;
    
}

#clock36 .week{
    position:absolute;
    top:23px;
    left:15px;
    font-size:10px;
    color:#825644;
    font-family: 'Josefin Sans Regular', san-serif;
    z-index:1;
}

#clock37 .time {
    position: relative;
    display: flex;
    align-items: left;
    justify-content: left;
    padding: 17px 40px 17px;
    background-image: url('../images/bg/dclock_bg4.png');
    border-radius: 10px;
    font-family: 'Nunito Regular';
    font-size: 31px;
    color:#FFFFFF;
    text-shadow: 0 0 15px rgba(232,146, 146, 1),  0 0 15px rgba(232, 146, 146, 0);
    overflow: hidden;
}
#clock37 .colon {
    font-family: 'Nunito Regular';

}

#clock37 .week{
    position:absolute;
    top:25px;
    left:12px;
    font-size:9px;
    color:#FFFFFF;
    font-family: 'Nunito Regular', san-serif;
}

#clock37 .session{
    position:relative;
    bottom:43px;
    left:12px;
    font-size:9px;
    color:#FFFFFF;
    font-family: 'Nunito Regular', san-serif;
    
}

#clock38 .time {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
     padding: 15px 30px 10px;
    background-image: url('../images/bg/dclock_bg5.png');
    border-radius: 10px;
    font-family: 'Josefin Sans Regular', san-serif;
    font-size: 38px;
    color:#4b4a49;
    overflow: hidden;
    bottom:-7px;
}
#clock38 .time .colon {
    top:-7px;
    font-family: 'Josefin Sans Regular', san-serif;
    font-size: 30px;
}

#clock38 .session{
    position:absolute;
    bottom:22px;
    left:190px;
    font-size:9px;
    color:#4b4a49;
    font-family: 'Josefin Sans Regular', san-serif;
    
}

#clock38 .week{
    position:absolute;
    bottom:40px;
    left:189px;
    font-size:9px;
    color:#4b4a49;
    font-family: 'Josefin Sans Regular', san-serif;
    z-index:1;
}

/*Halloween Analog Clock Design*/
#clock39
{
    position: relative;
    background-image: url('../images/bg/clock_bg24.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}
#clock39 .h-hand
{
    position: absolute;
    left: 96.5px;
    top: 77px;
    background-image: url('../images/hand/hour21.png');
    height: 40px;
    width: 7px;
    background-size: 7px 40px;
    transform-origin: 50% 95%;
}
#clock39 .m-hand
{
    position: absolute;
    left: 96.5px;
    top: 45.5px;
    background-image: url('../images/hand/min21.png');
    height: 73px;
    width: 5.5px;
    background-size: 5.5px 73px;
    transform-origin: 50% 95%;
}
#clock40
{
    position: relative;
    background-image: url('../images/bg/clock_bg25.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}
#clock40 .h-hand
{
    position: absolute;
    left: 99px;
    top: 73.2px;
    background-image: url('../images/hand/hour22.png');
    height: 40px;
    width: 6px;
    background-size: 6px 40px;
    transform-origin: 50% 95%;
}
#clock40 .m-hand
{
    position: absolute;
    left: 99px;
    top: 42px;
    background-image: url('../images/hand/min22.png');
    height: 73px;
    width: 5.5px;
    background-size: 5.5px 73px;
    transform-origin: 50% 95%;
}

/*Halloween Digital Clock Design*/
#clock41 .time {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 47px 30px 0px;
    background-image: url('../images/bg/dclock_bg6.png');
    background-repeat:no-repeat;
    border-radius: 10px;
    font-family: 'Haettenschweiler Regular', san-serif;
    font-size: 30px;
    color:#ffffff;
    overflow: hidden;
    bottom:0px;
}
#clock41 .time .colon {
    top:-8px;
    font-family: 'Haettenschweiler Regular', san-serif;
    font-size: 26px;
}
#clock41 .session{
    position:relative;
    bottom:25px;
    left:160px;
    font-size:10px;
    color:#ffffff;
    font-family: 'Haettenschweiler Regular', san-serif;
}

#clock42 .time {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 18px 0px 25px 59px;
    background-image: url('../images/bg/dclock_bg7.png');
    background-repeat:no-repeat;
    border-radius: 10px;
    font-family: 'Haettenschweiler Regular', san-serif;
    font-size: 27px;
    color:#58371f;
    overflow: hidden;
    bottom:0px;
}
#clock42 .session{
    position:relative;
    bottom:25px;
    left:131px;
    font-size:10px;
    color:#58371f;
    font-family: 'Haettenschweiler Regular', san-serif;
}

/*Chinese New Year Analog Clock Design*/
#clock43
{
    position: relative;
    background-image: url('../images/bg/clock_bg26.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock43 .h-hand
{
    position: absolute;
    left: 96.5px;
    top: 62.2px;
    background-image: url('../images/hand/hour19.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock43 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min19.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}

#clock44
{
    position: relative;
    background-image: url('../images/bg/clock_bg27.png');
    width: 200px;
    height: 200px;
    background-size: contain;
}

#clock44 .h-hand
{
    position: absolute;
    left: 96.5px;
    top: 62.2px;
    background-image: url('../images/hand/hour20.png');
    height: 40px;
    width: 8px;
    background-size: 8px 40px;
    transform-origin: 50% 95%;
}

#clock44 .m-hand
{
    position: absolute;
    left: 96px;
    top: 32px;
    background-image: url('../images/hand/min20.png');
    height: 72px;
    width: 8px;
    background-size: 8px 72px;
    transform-origin: 50% 95%;
}
/*Chinese New Year Digital Clock Design*/
#clock45 .time {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
     padding: 20px 35px;
    background-image: url('../images/bg/dclock_bg8.png');
    border-radius: 10px;
    font-family: 'Haettenschweiler Regular', san-serif;
    font-size: 28px;
    color:#b81319;
    overflow: hidden;
    bottom:-7px;
}
#clock45 .time .colon {
    top:-4px;
    font-family: 'Haettenschweiler Regular', san-serif;
    font-size: 30px;
}

#clock45 .session{
    position:relative;
    bottom:40px;
    left:160px;
    font-size:9px;
    color:#b81319;
    font-family: 'Haettenschweiler Regular', san-serif;
    
}
#clock46 .time {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
     padding: 31px 35px 20px 1px;
    background-image: url('../images/bg/dclock_bg9.png');
    border-radius: 10px;
    font-family: 'Haettenschweiler Regular', san-serif;
    font-size: 24px;
    color:#404041;
    overflow: hidden;
    bottom:-7px;
}
#clock46 .time .colon {
    top:-3px;
    font-family: 'Haettenschweiler Regular', san-serif;
    font-size: 24px;
}

#clock46 .session{
    position:relative;
    bottom:36px;
    left:138px;
    font-size:9px;
    color:#404041;
    font-family: 'Haettenschweiler Regular', san-serif;
    
}