/*--Author: W3Layouts
	Author URL: http://w3layouts.com
	License: Creative Commons Attribution 3.0 Unported
	License URL: http://creativecommons.org/licenses/by/3.0/
 --*/
/* reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
ol,
ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* start editing from here */
a {
  text-decoration: none;
}
.txt-rt {
  text-align: right;
} /* text align right */
.txt-lt {
  text-align: left;
} /* text align left */
.txt-center {
  text-align: center;
} /* text align center */
.float-rt {
  float: right;
} /* float right */
.float-lt {
  float: left;
} /* float left */
.clear {
  clear: both;
} /* clear float */
.pos-relative {
  position: relative;
} /* Position Relative */
.pos-absolute {
  position: absolute;
} /* Position Absolute */
.vertical-base {
  vertical-align: baseline;
} /* vertical align baseline */
.vertical-top {
  vertical-align: top;
} /* vertical align top */
nav.vertical ul li {
  display: block;
} /* vertical menu */
nav.horizontal ul li {
  display: inline-block;
} /* horizontal menu */
img {
  max-width: 100%;
}
/*end reset*/
body {
  background: url(../images/bg.jpg) no-repeat #e7e7e7;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
.content {
  width: 57%;
  margin: 0 auto;

  padding: 4em;
  margin-top: 8em;
}
.content {
  text-align: center;
  font-family: "Open Sans", sans-serif;
}
.content-grid h1 {
  color: #fff;
  font-size: 5em;
  font-weight: lighter;
}
.content-grid h2 {
  color: #fff;
  font-size: 2.5em;
  font-weight: lighter;
  margin: 0 auto;
}
/*---timer----*/
/* ---------- TIMER ---------- */
.timer_wrap {
  width: 100%;
  margin: 0 auto;
}
#counter {
  height: 160px;
  font-size: 60px;
  color: #fff;
  overflow: hidden;
}
.timer {
  border-top: 2px ridge #5f5f5f;
  border-bottom: 2px ridge #5f5f5f;
}
.timer h4 {
  font-size: 14px;
  color: #e5e5e5;
  font-style: normal;
  font-variant: normal;
  font-weight: lighter;
  letter-spacing: 1px;
  margin-top: 20px;
}
.countDays,
.countHours,
.countMinutes,
.countSeconds {
  display: inline-block;
  width: 106px;
  height: 106px;
  margin-left: 10px;
  background: #191919;
  border-radius: 50%;
}
.points {
  float: left;
  width: 40px;
  margin: 0;
  font-size: 44px;
  font-weight: lighter;
  text-align: center;
  line-height: 138px;
  text-shadow: none;
  color: #fff;
  display: none;
}
.boxName {
  float: left;
  width: 100%;
  font-size: 15px;
  color: #fff;
  font-style: italic;
  font-weight: lighter;
  padding: 2px;
}
/* ---------- /TIMER ---------- */
.content-grid h3 {
  display: block;
  color: #fff;
  font-size: 1.2em;
  font-weight: lighter;
  text-transform: uppercase;
  padding-top: 7px;
}
/*----start-copy-right---*/
.copy-right {
  text-align: center;
  position: absolute;
  bottom: 0px;
  width: 100%;
}
.copy-right p {
  display: block;
  color: #fff;
  font-size: 0.8em;
  font-weight: lighter;
  text-transform: uppercase;
  padding-top: 7px;
  font-family: "Open Sans", sans-serif;
}
.copy-right p a {
  color: #fff;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.copy-right p a:hover {
  color: #000;
}
@media only screen and (max-width: 1024px) {
  .content-grid h1 {
    font-size: 4em;
  }
  .copy-right p {
    padding: 1em;
  }
  .content-grid h2 {
    font-size: 2.3em;
  }
}
@media only screen and (max-width: 991px) {
  .content {
    margin-top: 6em;
  }
}
@media only screen and (max-width: 900px) {
  .content-grid h1 {
    font-size: 3.8em;
  }
  .content {
    width: 60%;
  }
  .content-grid h2 {
    font-size: 2.1em;
  }
}
@media only screen and (max-width: 800px) {
  .content-grid h1 {
    font-size: 3.6em;
  }
  .content-grid h2 {
    font-size: 1.8em;
  }
  .content {
    width: 67%;
  }
  .digit {
    left: -2px;
  }
}
@media only screen and (max-width: 768px) {
  .content {
    width: 71%;
    padding: 3em;
  }
  .position {
    margin-top: 27px;
  }
  .content-grid h2 {
    font-size: 1.7em;
  }
  .position {
    margin-top: 24px;
  }
}
@media only screen and (max-width: 736px) {
  .content-grid h1 {
    font-size: 3.5em;
  }
  .countDays,
  .countHours,
  .countMinutes,
  .countSeconds {
    width: 105px;
  }
  .content {
    margin-top: 4em;
  }
}
@media only screen and (max-width: 667px) {
  .content-grid h1 {
    font-size: 3.3em;
  }
  .countDays,
  .countHours,
  .countMinutes,
  .countSeconds {
    width: 96px;
    height: 96px;
  }
  .content-grid h2 {
    font-size: 1.5em;
  }
}
@media only screen and (max-width: 640px) {
  .content-grid h1 {
    font-size: 3.2em;
  }
  .countDays,
  .countHours,
  .countMinutes,
  .countSeconds {
    width: 88px;
    height: 92px;
  }
  .position {
    font-size: 33px;
  }
  .digit {
    left: 0px;
  }
  .copy-right p {
    font-size: 0.9em;
  }
  .content {
    margin-top: 3em;
  }
}
@media only screen and (max-width: 600px) {
  .countDays,
  .countHours,
  .countMinutes,
  .countSeconds {
    width: 84px;
    height: 87px;
  }
  .boxName {
    padding: 0 0 6px 0;
  }
  .content-grid h1 {
    font-size: 3em;
  }
  .boxName {
    font-size: 13px;
  }
  .position {
    font-size: 35px;
  }
  .content-grid h2 {
    font-size: 1.4em;
  }
}
@media only screen and (max-width: 568px) {
  .content-grid h1 {
    font-size: 2.8em;
  }
  .content {
    width: 75%;
  }
  .copy-right p {
    line-height: 1.5;
  }
  .content-grid h2 {
    font-size: 1.3em;
  }
}
@media only screen and (max-width: 480px) {
  .content-grid h1 {
    font-size: 2.7em;
  }
  .countDays,
  .countHours,
  .countMinutes,
  .countSeconds {
    width: 86px;
  }
  .digit {
    left: 0px;
  }
}
@media only screen and (max-width: 414px) {
  .content-grid h1 {
    font-size: 2.6em;
  }
  .content {
    width: 77%;
    padding: 2em;
  }
  .position {
    font-size: 28px;
  }
  .countDays,
  .countHours,
  .countMinutes,
  .countSeconds {
    width: 74px;
    height: 85px;
  }
  .content-grid h1 {
    font-size: 2.4em;
  }
}
@media only screen and (max-width: 384px) {
  .content-grid h1 {
    font-size: 2.3em;
  }
  .content-grid h2 {
    font-size: 1.2em;
  }

  .content-grid h2 {
    font-size: 1.1em;
  }
  #counter {
    height: 242px;
  }
}
@media only screen and (max-width: 375px) {
  .content {
    margin-top: 2em;
  }
}
@media only screen and (max-width: 320px) {
  .content {
    width: 85%;
    padding: 1em;
  }
  .content-grid h1 {
    font-size: 2em;
  }
  .timer_wrap {
    margin-top: 2em;
  }
  .content-grid h2 {
    font-size: 1em;
  }
}