/* Root Font Variables */
:root {
  --default-font: "GraphikWeb-Regular", sans-serif;
  --heading-font: "GraphikWeb-Bold", sans-serif;
  --nav-font: "GraphikWeb-Medium", sans-serif;
}
@font-face {
    font-family: 'GraphikWeb-Black';
    src: url('../fonts/GraphikWeb-Black.eot');
    src: url('../fonts/GraphikWeb-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-Black.woff2') format('woff2'),
        url('../fonts/GraphikWeb-Black.woff') format('woff'),
        url('../fonts/GraphikWeb-Black.ttf') format('truetype'),
        url('../fonts/GraphikWeb-Black.svg#GraphikWeb-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikWeb-BlackItalic';
    src: url('../fonts/GraphikWeb-BlackItalic.eot');
    src: url('../fonts/GraphikWeb-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-BlackItalic.woff2') format('woff2'),
        url('../fonts/GraphikWeb-BlackItalic.woff') format('woff'),
        url('../fonts/GraphikWeb-BlackItalic.ttf') format('truetype'),
        url('../fonts/GraphikWeb-BlackItalic.svg#GraphikWeb-BlackItalic') format('svg');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikWeb-Bold';
    src: url('../fonts/GraphikWeb-Bold.eot');
    src: url('../fonts/GraphikWeb-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-Bold.woff2') format('woff2'),
        url('../fonts/GraphikWeb-Bold.woff') format('woff'),
        url('../fonts/GraphikWeb-Bold.ttf') format('truetype'),
        url('../fonts/GraphikWeb-Bold.svg#GraphikWeb-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikWeb-BoldItalic';
    src: url('../fonts/GraphikWeb-BoldItalic.eot');
    src: url('../fonts/GraphikWeb-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-BoldItalic.woff2') format('woff2'),
        url('../fonts/GraphikWeb-BoldItalic.woff') format('woff'),
        url('../fonts/GraphikWeb-BoldItalic.ttf') format('truetype'),
        url('../fonts/GraphikWeb-BoldItalic.svg#GraphikWeb-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikWeb-ExtralightItalic';
    src: url('../fonts/GraphikWeb-ExtralightItalic.eot');
    src: url('../fonts/GraphikWeb-ExtralightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-ExtralightItalic.woff2') format('woff2'),
        url('../fonts/GraphikWeb-ExtralightItalic.woff') format('woff'),
        url('../fonts/GraphikWeb-ExtralightItalic.ttf') format('truetype'),
        url('../fonts/GraphikWeb-ExtralightItalic.svg#GraphikWeb-ExtralightItalic') format('svg');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikWeb-Extralight';
    src: url('../fonts/GraphikWeb-Extralight.eot');
    src: url('../fonts/GraphikWeb-Extralight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-Extralight.woff2') format('woff2'),
        url('../fonts/GraphikWeb-Extralight.woff') format('woff'),
        url('../fonts/GraphikWeb-Extralight.ttf') format('truetype'),
        url('../fonts/GraphikWeb-Extralight.svg#GraphikWeb-Extralight') format('svg');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikWeb-Light';
    src: url('../fonts/GraphikWeb-Light.eot');
    src: url('../fonts/GraphikWeb-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-Light.woff2') format('woff2'),
        url('../fonts/GraphikWeb-Light.woff') format('woff'),
        url('../fonts/GraphikWeb-Light.ttf') format('truetype'),
        url('../fonts/GraphikWeb-Light.svg#GraphikWeb-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikWeb-LightItalic';
    src: url('../fonts/GraphikWeb-LightItalic.eot');
    src: url('../fonts/GraphikWeb-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-LightItalic.woff2') format('woff2'),
        url('../fonts/GraphikWeb-LightItalic.woff') format('woff'),
        url('../fonts/GraphikWeb-LightItalic.ttf') format('truetype'),
        url('../fonts/GraphikWeb-LightItalic.svg#GraphikWeb-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikWeb-Medium';
    src: url('../fonts/GraphikWeb-Medium.eot');
    src: url('../fonts/GraphikWeb-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-Medium.woff2') format('woff2'),
        url('../fonts/GraphikWeb-Medium.woff') format('woff'),
        url('../fonts/GraphikWeb-Medium.ttf') format('truetype'),
        url('../fonts/GraphikWeb-Medium.svg#GraphikWeb-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikWeb-MediumItalic';
    src: url('../fonts/GraphikWeb-MediumItalic.eot');
    src: url('../fonts/GraphikWeb-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-MediumItalic.woff2') format('woff2'),
        url('../fonts/GraphikWeb-MediumItalic.woff') format('woff'),
        url('../fonts/GraphikWeb-MediumItalic.ttf') format('truetype'),
        url('../fonts/GraphikWeb-MediumItalic.svg#GraphikWeb-MediumItalic') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikWeb-Regular';
    src: url('../fonts/GraphikWeb-Regular.eot');
    src: url('../fonts/GraphikWeb-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-Regular.woff2') format('woff2'),
        url('../fonts/GraphikWeb-Regular.woff') format('woff'),
        url('../fonts/GraphikWeb-Regular.ttf') format('truetype'),
        url('../fonts/GraphikWeb-Regular.svg#GraphikWeb-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikWeb-RegularItalic';
    src: url('../fonts/GraphikWeb-RegularItalic.eot');
    src: url('../fonts/GraphikWeb-RegularItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-RegularItalic.woff2') format('woff2'),
        url('../fonts/GraphikWeb-RegularItalic.woff') format('woff'),
        url('../fonts/GraphikWeb-RegularItalic.ttf') format('truetype'),
        url('../fonts/GraphikWeb-RegularItalic.svg#GraphikWeb-RegularItalic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikWeb-Semibold';
    src: url('../fonts/GraphikWeb-Semibold.eot');
    src: url('../fonts/GraphikWeb-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-Semibold.woff2') format('woff2'),
        url('../fonts/GraphikWeb-Semibold.woff') format('woff'),
        url('../fonts/GraphikWeb-Semibold.ttf') format('truetype'),
        url('../fonts/GraphikWeb-Semibold.svg#GraphikWeb-Semibold') format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikWeb-SemiboldItalic';
    src: url('../fonts/GraphikWeb-SemiboldItalic.eot');
    src: url('../fonts/GraphikWeb-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-SemiboldItalic.woff2') format('woff2'),
        url('../fonts/GraphikWeb-SemiboldItalic.woff') format('woff'),
        url('../fonts/GraphikWeb-SemiboldItalic.ttf') format('truetype'),
        url('../fonts/GraphikWeb-SemiboldItalic.svg#GraphikWeb-SemiboldItalic') format('svg');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikWeb-Super';
    src: url('../fonts/GraphikWeb-Super.eot');
    src: url('../fonts/GraphikWeb-Super.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-Super.woff2') format('woff2'),
        url('../fonts/GraphikWeb-Super.woff') format('woff'),
        url('../fonts/GraphikWeb-Super.ttf') format('truetype'),
        url('../fonts/GraphikWeb-Super.svg#GraphikWeb-Super') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikWeb-SuperItalic';
    src: url('../fonts/GraphikWeb-SuperItalic.eot');
    src: url('../fonts/GraphikWeb-SuperItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-SuperItalic.woff2') format('woff2'),
        url('../fonts/GraphikWeb-SuperItalic.woff') format('woff'),
        url('../fonts/GraphikWeb-SuperItalic.ttf') format('truetype'),
        url('../fonts/GraphikWeb-SuperItalic.svg#GraphikWeb-SuperItalic') format('svg');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikWeb-Thin';
    src: url('../fonts/GraphikWeb-Thin.eot');
    src: url('../fonts/GraphikWeb-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-Thin.woff2') format('woff2'),
        url('../fonts/GraphikWeb-Thin.woff') format('woff'),
        url('../fonts/GraphikWeb-Thin.ttf') format('truetype'),
        url('../fonts/GraphikWeb-Thin.svg#GraphikWeb-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GraphikWeb-ThinItalic';
    src: url('../fonts/GraphikWeb-ThinItalic.eot');
    src: url('../fonts/GraphikWeb-ThinItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GraphikWeb-ThinItalic.woff2') format('woff2'),
        url('../fonts/GraphikWeb-ThinItalic.woff') format('woff'),
        url('../fonts/GraphikWeb-ThinItalic.ttf') format('truetype'),
        url('../fonts/GraphikWeb-ThinItalic.svg#GraphikWeb-ThinItalic') format('svg');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
/* Body Font */
body{
  font-family: var(--default-font);
}

/* Heading Font */
h1,h2,h3,h4,h5,h6{
  font-family: var(--heading-font);
}

/* Navbar Font */
.navbar{
  font-family: var(--nav-font);
}

/**
 *	This element is created inside your target element
 *	It is used so that your own element will not need to be altered
 **/
.time_circles {
    position: relative;
    width: 100%;
    height: 260px;
}

/**
 *	This is all the elements used to house all text used
 * in time circles
 **/
.time_circles > div {
    position: absolute;
    text-align: center;
	top: 18%!important;
}

/**
 *	Titles (Days, Hours, etc)
 **/
.time_circles > div > h4 {
    margin: 0px;
    padding: 0px;
    text-align: center;
    text-transform: uppercase; 
	font-size:22px!important;
	margin-top: 40px!important;
	color:#000; 
}

/**
 *	Time numbers, ie: 12
 **/
.time_circles > div > span {
    display: block;
    width: 100%;
    text-align: center; 
	letter-spacing: 0.025em;
    font-size: 80px!important;
	line-height: 170px; 
	color:#000;font-family: 'GraphikWeb-Semibold';
}
.countdown { width: 1000px; margin: 0 auto; }

@media (max-width: 1600px){

.countdown { width: 900px; margin: 0 auto; }    
.time_circles > div > span {font-size: 70px!important; line-height: 130px;}
.time_circles > div > h4 { font-size: 22px!important; margin-top: 40px; }	
}
@media (max-width: 1600px){
.countdown { width: 800px; margin: 0 auto; }      
.time_circles > div > span {font-size: 65px!important; line-height: 170px;}
.time_circles > div > h4 { font-size: 20px!important; margin-top: 40px; }   
}
@media (max-width: 1366px){
.countdown { width: 700px; margin: 0 auto; } 
.time_circles > div > span {font-size: 65px!important; line-height: 170px;}
.time_circles > div > h4 { font-size: 18px!important; margin-top: 35px; }		
}

@media (max-width: 1280px){
.countdown { width: 500px; margin: 0 auto; } 
.time_circles > div > span {font-size: 65px!important; line-height: 170px;}
.time_circles > div > h4 { font-size: 18px!important; margin-top: 35px; }	
}

@media (max-width: 1024px){.countdown { width: 500px; margin: 0 auto; } 
.time_circles > div > span {font-size: 50px !important; line-height: 145px;}
.time_circles > div > h4 { font-size: 17px!important; margin-top: 25px; }   	
}
 
@media (max-width: 952px){
.countdown { width: 400px; margin: 0 auto; }     
.time_circles > div > span {font-size: 30px!important; line-height: 50px;}
.time_circles > div > h4 { font-size: 13px!important; margin-top: 20px; }	
}
@media (max-width: 851px){
.time_circles > div > span {font-size: 45px !important; line-height: 90px;}
.time_circles > div > h4 { font-size: 14px!important; margin-top: 20px; }
}
@media (max-width: 672px){
.time_circles > div > span {font-size: 35px !important; line-height: 40px;}
.time_circles > div > h4 { font-size: 14px!important; margin-top: 20px; }	
}
@media (max-width: 500px){
.time_circles > div > span {font-size: 35px !important; line-height: 30px;}
.time_circles > div > h4 { font-size: 14px!important; margin-top: 20px; }	
}
@media (max-width: 450px){
.time_circles > div > span {font-size: 30px !important; line-height: 15px;}
.time_circles > div > h4 { font-size: 14px!important; margin-top: 20px; }	
}
@media (max-width: 400px){
.time_circles > div > span {font-size: 25px !important; line-height: 5px;}
.time_circles > div > h4 { font-size: 12px!important; margin-top: 15px; }	
}
@media (max-width: 350px){
.time_circles > div > span {font-size: 22px !important; line-height: 0px;}
.time_circles > div > h4 { font-size: 10px!important; margin-top: 10px; }	
.time_circles > div {
    position: absolute;
    text-align: center;
    top: 17% !important;
}	
}