@font-face{ font-family:"gotham-rounded-light"; src:url("../fonts/gotham-rounded-light.otf"); } body {} audio, canvas, img, video { vertical-align: middle; } /* * Remove default fieldset styles. */ .countdown { line-height: 1.2em; margin: 0 auto; max-width: 800px; text-align: center; } /* Example 9 */ .countdown-timer .countdown { max-width: none; padding: 35px 25px; } .countdown-timer .circle { display: inline-block; position: relative; margin-left: 0; background:transparent; border-radius:50%; width:17%;/**/ } .countdown-timer .circle:first-child {margin-left:0px;} .countdown-timer canvas { /*height: 275px; width: 275px;*/ width: 100%; height:275px\9\0;/*Only works in IE9*/ } .countdown-timer .circle__values { height: 70px; margin-top: -35px; position: absolute; top: 49%; width: 100%; font-family:"gotham-rounded-light"; letter-spacing:-5px; } .circle__values .ce-digit span { margin-right: 4px; } .wrapper { margin: 0 auto; max-width: 1280px; width: 100%; } .countdown-timer .ce-digit, .countdown-timer .ce-label { display: block; line-height: 1; } .main_heading { margin-top: 25px;} .countdown-timer .ce-digit { display: block; font-size:50px; font-family: arial; font-weight:bold; } .countdown-timer .ce-label { color: #929292; display: block; margin-top: 5px; font-family: arial; font-weight:bold; text-transform: uppercase; font-size:15px; } div#please_wait { font-size: 32px; margin: 8px 0px 15px; } .hours-glass { text-align: center; margin: 0 auto; display: table; width: 80px; border-radius: 50%; height: 75px;} .ce-digit.ce-days{color:#000000;} .ce-label.ce-days-label{color:#6a6a6a; letter-spacing:-1px;} .ce-digit.ce-hours{color:#000000;} .ce-label.ce-hours-label{color:#6a6a6a; letter-spacing:-1px;} .ce-digit.ce-minutes{color:#000000;} .ce-label.ce-minutes-label{color:#6a6a6a; letter-spacing:-1px;} .ce-digit.ce-seconds{color:#000000;} .ce-label.ce-seconds-label{color:#6a6a6a; letter-spacing:-1px;} @media (max-width: 768px){ .countdown-timer .circle { margin-left: 0; width: 20%; } footer { position: fixed; } .countdown-timer .ce-digit{font-size:40px;} .countdown-timer .ce-label{font-size:14px;} } @media (max-width: 640px){ .countdown-timer .circle { margin-left: 0; width: 20%; } .countdown-timer .circle__values { top: 54%;} .countdown-timer .ce-digit{font-size:35px;} .countdown-timer .ce-label{font-size:13px;} } @media (max-width: 480px){ .countdown-timer .circle{width:20%; margin-left:0;} .countdown-timer .circle__values { height: 30px; top: 72%; } .countdown-timer .ce-digit { font-size: 21px; } .countdown-timer .ce-label { font-size: 10px; margin-top: 1px; } .countdown-timer .countdown { padding: 20px 0; } } @media (max-width: 360px){ .countdown-timer .circle{width:23%; margin-left:0px; margin-top:-60px} .countdown-timer .circle:first-child{margin-top:0px} .countdown-timer .circle__values { top: 71%; } .countdown-timer .ce-digit{font-size:24px;} .countdown-timer .ce-label { font-size: 11px; margin-top: 0; } }