/**
 *
 * Do not edit or add to this file if you wish to upgrade the module to newer
 * versions in the future. If you wish to customize the module for your
 * needs please contact us to https://www.milople.com/contact-us.html
 *
 * @category    Ecommerce
 * @package     Milople_Countdown
 * @copyright   Copyright (c) 2017 Milople Technologies Pvt. Ltd. All Rights Reserved.
 *
 **/
 .days7,
 .end7,
 .hours7,
 .mins7,
 .secs7,
 .timer-item1 {
     background: #000;
     animation: 1s infinite alternate fadeTimer
 }
 
 #countdown4:after,
 #countdown4:before {
     width: 8px;
     height: 65px;
     background: #444;
     top: 35px;
     content: "";
     display: block
 }
 
 #countdown4 #tiles>span,
 .days7,
 .end7,
 .hours7,
 .mins7,
 .secs7,
 .timer-item1 {
     animation: 1s infinite alternate fadeTimer
 }
 
 .timermain7,
 .timermain8,
 .timermainsimple {
     font-family: Arial, sans-serif;
     font-size: 24px;
     padding: 5px
 }
 
 .timer-item1 {
     display: inline-block;
     padding: 5px 10px;
     border-radius: 5px;
     font-size: 25px;
     margin: 2px;
     color: #fff
 }
 
 .timer-label1,
 .timer-label2 {
     font-size: 14px;
     color: #777;
     margin: 0
 }
 
 .dayssimple,
 .endsimple,
 .hourssimple,
 .minssimple,
 .secssimple,
 .daysfade,
 .endfade,
 .hoursfade,
 .minsfade,
 .secsfade,
 .dayscircle,
 .endcircle,
 .hourscircle,
 .minscircle,
 .secscircle {
     display: inline;
     font-size: 40px;
     margin-top: 0
 }
 
 .days2,
 .end2,
 .hours2,
 .mins2,
 .secs2 {
     display: inline;
     font-size: 30px;
     margin-top: 0
 }
 
 #days4,
 #end4,
 #hours4,
 #mins4,
 #secs4 {
     display: inline;
     font-size: 24px;
     margin-top: 0
 }
 
 .days7,
 .end7,
 .hours7,
 .mins7,
 .secs7 {
     display: inline;
     font-size: 28px;
     margin-top: 0;
     border: 1px inset #b09393;
     color: #aa0b79
 }
 
 .timermaincircle {
     font-family: Arial, sans-serif;
     font-size: 24px;
     padding: 5px
 }
 
 .circle-timer-item,
 .timer-item6 {
     display: inline-block;
     font-size: 20px
 }
 
 .circle-timer-item {
     width: 60px;
     height: 60px;
     background-color: #333;
     color: #fff;
     border-radius: 50%;
     line-height: 60px;
     text-align: center;
     border: 4px solid transparent;
     transition: border-color .5s
 }
 
 #countdown4,
 #countdown4:before {
     border: 1px solid #111;
     position: absolute
 }
 
 .timermainlabel {
     background: #6f7170;
     width: fit-content;
 }
 
 .timermainlabel p {
     display: inline-block;
     font-size: 18px;
     color: #fffefe;
     margin: 0
 }
 
 .days-border {
     border-color: tomato
 }
 
 .hours-border {
     border-color: #00bcd4
 }
 
 .mins-border {
     border-color: #8bc34a
 }
 
 .secs-border {
     border-color: #ff9800
 }
 
 #countdown4 {
     width: 350px;
     height: 80px;
     text-align: center;
     background: #222;
     background-image: -webkit-linear-gradient(top, #222, #333, #333, #222);
     background-image: -moz-linear-gradient(top, #222, #333, #333, #222);
     background-image: -ms-linear-gradient(top, #222, #333, #333, #222);
     background-image: -o-linear-gradient(top, #222, #333, #333, #222);
     border-radius: 5px;
     box-shadow: 0 0 8px rgba(0, 0, 0, .6);
     margin: auto;
     padding: 24px 0;
     top: 0;
     bottom: 0
 }
 
 #countdown4:before {
     background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
     background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
     background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
     background-image: -o-linear-gradient(top, #555, #444, #444, #555);
     border-top-left-radius: 6px;
     border-bottom-left-radius: 6px;
     left: -10px
 }
 
 #countdown4:after {
     background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
     background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
     background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
     background-image: -o-linear-gradient(top, #555, #444, #444, #555);
     border: 1px solid #111;
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px;
     position: absolute;
     right: -10px
 }
 
 #countdown4 #tiles {
     position: relative;
     z-index: 1
 }
 
 #countdown4 #tiles>span {
     width: 50px;
     max-width: 92px;
     font: bold 35px 'Droid Sans', Arial, sans-serif;
     text-align: center;
     color: #111;
     background-color: #ddd;
     background-image: -webkit-linear-gradient(top, #bbb, #eee);
     background-image: -moz-linear-gradient(top, #bbb, #eee);
     background-image: -ms-linear-gradient(top, #bbb, #eee);
     background-image: -o-linear-gradient(top, #bbb, #eee);
     border-top: 1px solid #fff;
     border-radius: 3px;
     box-shadow: 0 0 12px rgba(0, 0, 0, .7);
     margin: 0 7px;
     padding: 18px 0;
     display: inline-block;
     position: relative
 }
 
 #countdown4 #tiles>span:before {
     content: "";
     width: 100%;
     height: 13px;
     background: #111;
     display: block;
     padding: 0 3px;
     position: absolute;
     top: 41%;
     left: -3px;
     z-index: -1
 }
 
 #countdown4 #tiles>span:after {
     content: "";
     width: 100%;
     height: 1px;
     background: #eee;
     border-top: 1px solid #333;
     display: block;
     position: absolute;
     top: 48%;
     left: 0
 }
 
 #countdown4 .labels li {
     width: 60px;
     font: bold 15px 'Droid Sans', Arial, sans-serif;
     color: #f47321;
     text-shadow: 1px 1px 0 #000;
     text-align: center;
     text-transform: uppercase;
     display: inline-block
 }
 
 @keyframes fadeTimer {
     from {
         opacity: 1
     }
 
     to {
         opacity: .5
     }
 }
 
 .flip-timer h2,
 .flip-timer p {
     display: inline-block;
     animation: 5s ease-in-out infinite alternate flip;
     border-radius: 5px;
     font-size: 38px;
     font-family: 'Press Start 2P', cursive;
     color: #fc0;
     text-shadow: 2px 2px 4px #000;
     margin: 5px;
     background: #ffebcd
 }
 
 @keyframes flip {
     from {
         transform: rotateX(0)
     }
 
     to {
         transform: rotateX(180deg)
     }
 }
 
 .timer-item6 {
     padding: 5px 10px;
     border-radius: 5px;
     font-weight: 700
 }
 
 .progress-bar {
     width: 70%;
     background-color: #f1f1f1;
     border-radius: 5px;
     margin-top: 10px;
     overflow: hidden
 }
 
 .bar {
     width: 100%;
     height: 10px;
     background-color: #4caf50;
     transition: width 1s ease-in-out
 }
 
 .timer-label6 {
     font-size: 14px;
     margin: 0;
     font-weight: 700
 }
 
 .modal29 {
     display: none;
     position: fixed;
     z-index: 101;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(0, 0, 0, .5);
     padding-top: 50px
 }
 
 .modal-content29 {
     background-color: #fefefe;
     margin: 5% auto;
     border: 1px solid #888;
     width: 80%;
     max-width: 600px;
     position: relative;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
     animation-name: modal-animation;
     animation-duration: 1s
 }
 
 @keyframes modal-animation {
     from {
         top: -50%;
         opacity: 0
     }
 
     to {
         top: 0;
         opacity: 1
     }
 }
 
 .close29 {
     position: absolute;
     right: 10px;
     font-size: 28px;
     font-weight: 700;
     cursor: pointer;
     color: #f0f8ff
 }
 
 .popup-container {
     display: flex;
     flex-direction: row
 }
 
 .image-container {
     flex: 1
 }
 
 .image-container img {
     width: 100%;
     height: auto;
     display: block
 }
 
 .timer-container {
     flex: 1;
     padding: 50px 20px 0;
     background: #2d1d35;
     color: #fff
 }
 
 .timermain4 {
     display: flex;
     align-items: center;
     overflow: hidden;
     width: fit-content
 }
 
 .timermain4 p {
     display: inline-block;
     font-family: 'Droid Sans', sans-serif;
     font-size: 27px;
     color: #fffefe;
     text-shadow: 2px 2px 4px #000;
     margin: 8px
 }
 
 .timer-item4 {
     font-size: 32px;
     font-weight: 700;
     color: #2b1f1f;
     border-radius: 36%;
     animation: 1s infinite alternate slide;
     background: beige
 }
 
 .timer-label4 {
     font-size: 18px;
     padding: 10px
 }
 
 @keyframes slide {
     from {
         transform: translateY(0)
     }
 
     to {
         transform: translateY(-10px)
     }
 }
 
 .redirectLink:hover {
     text-decoration: none;
     color: #000
 }
 
 .redirectLink:active,
 .redirectLinkpopup:active {
     text-decoration: none;
     color: ivory
 }
 
 .redirectLink,
 .redirectLink:visited {
     color: #000
 }
 
 .redirectLinkpopup {
     color: #fff
 }
 
 .redirectLinkpopup:hover {
     text-decoration: none;
     color: #fff
 }
 
 .modal29 .timer-container>h3 {
     text-align: center;
     margin: 10px
 }
 
 .linkbutton {
     margin-top: 10px;
     background: 0 0;
     color: #fff
 }
 
 .product-item-info {
     max-width: 100%;
     width: auto
 }
 
 @media only screen and (max-width:680px) and (min-width:480px) {
   
     .image-container img {
         width: 100% !important;
         height: 100% !important
     }
 
     .timer-container {
         flex: 1;
         padding: 20px 0 0 !important
     }
 
     .days7,
     .end7,
     .hours7,
     .mins7,
     .secs7 {
         display: inline;
         font-size: 20px !important;
         margin-top: 0;
         animation: 1s infinite alternate fadeTimer;
         border: 1px inset #b09393;
         background: #000;
         color: #aa0b79
     }
 }