/**
 *	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: 100%;
    margin: 0.805em 0;
}

/**
 *	This is all the elements used to house all text used
 * in time circles
 **/
 @media only screen and (max-width: 768px){
 .time_circles > div {
    position: absolute;
    text-align: center;
    font-size: 12px;
}
}
.time_circles > div {
    position: absolute;
    text-align: center;
}

/**
 *	Titles (Days, Hours, etc)
 **/
.time_circles > div > h4 {
    margin: 0px;
    padding: 0px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: #fff;
    font-size: 75% !important;
    margin-top: 1.5em;
}

/**
 *	Time numbers, ie: 12
 **/
.time_circles > div > span {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    margin-top: 0.1em;
    font-weight: bold;
    color: #fff;
}
#timer h2 {margin:0px; font-size: 24px; text-transform: uppercase; padding:23% 0;}
#timer input[type="email"] {width:57.4%; float: left; line-height: 35px; border:solid 1px #ccc; background: #fff; border-radius: 30px 0px 0px 30px; padding:0 26px; margin: 0px -4px 0 0px;}
#timer button {border-radius: 30px; color: #fff; border-radius: 0px 30px 30px 0px; float: left; line-height: 47px;height: 47px;}
#timer form {width: 90%; float: right; margin: 0px; padding: 5% 0px 0 0;}
#timer h6 {margin: 0 0 20px 0;}

@media only screen and (max-width: 1169px){
#timer .m4 {width: 100%;}
#timer .m3 {width: 100%; text-align: center;}
#timer h2 {padding: 5% 0 0% 0; display: table; margin: 0 auto; float: none;}
#timer .m3 br {display: none;}
#timer .m5 {width: 100%;}
#timer button {line-height: 45px; height: 45px;}
#timer form {width:60%; margin: 0 auto; display: table; float: none; padding: 0% 0px 20px 0;}
#first-row {height: 70vh;}
#timer form  {width: 100%; float: left;} }

@media only screen and (max-width: 767px){
  /*#DateCountdown canvas {visibility: hidden;}*/
  #timer form {width:100%}
  .dhs2018:after {display: none;}
  #timer input[type="email"] {width: 42%;}
  .footer-top-row img {width:300px; margin: 0 0 10px 0;}}


.textDiv_Days{
	top: 37px;  left: 0px;  width: 106.75px;
}
.textDiv_Hours{
	top: 37px;  left: 107px;  width: 106.75px;
}
.textDiv_Minutes{
	top: 37px;  left: 214px;  width: 106.75px;
}
.textDiv_Seconds{
	top: 37px;  left: 320px;  width: 113.75px;
}
@media only screen and (max-width: 414px){
 .textDiv_Days {
    left: 26;
}
}
@media only screen and (max-width: 360px){
 .textDiv_Days {
    left: 2;
}
}
@media only screen and (max-width: 414px){
 .textDiv_Hours {
    left: 26;
}
}
@media only screen and (max-width: 414px){
 .textDiv_Minutes {
    left: 26;
}
}
@media only screen and (max-width: 414px){
 .textDiv_Seconds {
    left: 26;
}
}