@charset "utf-8";
/* CSS Document */


/*
  google fonts   [imported]
  supersized     [imported]
  YTPlayer       [imported]
  twitter ticker [imported]
  fonts
  reset
  supersized wrapper
  supersized background
  supersized
  general
  layout
  closer
  intro
  countdown
  curtains
  menu
  menu mobile
  credits
  social icons wrapper
  social icons
  footer
  footer background
  contact form
  newsletter animation
  newsletter form
  dividers
  screen loader
  preload
  preload content
  extras
  effect 8
*/


/* google fonts */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700italic,700,500italic,500,400italic,300italic,300,100italic,100);
/* supersized */
@import url('../theme/supersized.shutter.css');
/* YTPlayer */
@import url('../YTPlayer/YTPlayer.css');
/* twitter ticker */
@import url('../twitter/jquery.tweet.css');


/* fonts */
@font-face {
   font-family: 'BebasNeueRegular';
   src: url('fonts/bebasneue/bebasneue-webfont.eot');
   src: url('fonts/bebasneue/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
      url('fonts/bebasneue/bebasneue-webfont.woff') format('woff'),
      url('fonts/bebasneue/bebasneue-webfont.ttf') format('truetype'),
      url('fonts/bebasneue/bebasneue-webfont.svg#BebasNeueRegular') format('svg');
   font-style: normal;
   font-weight: normal;
}

@font-face {
   font-family: 'LeagueGothicRegular';
   src: url('fonts/leaguegothic-regular/leaguegothic-regular-webfont.eot');
   src: url('fonts/leaguegothic-regular/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
      url('fonts/leaguegothic-regular/leaguegothic-regular-webfont.woff') format('woff'),
      url('fonts/leaguegothic-regular/leaguegothic-regular-webfont.ttf') format('truetype'),
      url('fonts/leaguegothic-regular/leaguegothic-regular-webfont.svg#LeagueGothicRegular') format('svg');
   font-weight: normal;
   font-style: normal;

}


/* 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,
center,
dl,
dt,
dd,
ol,
ul,
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;
}

html,
body {
   height: 100%;
}

body {
   line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
   display: block;
}

ol,
ul {
   list-style: none;
}

blockquote,
q {
   quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
   content: '';
   content: none;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

*:focus {
   outline: none;
}


/* supersized wrapper */
.supersized-wrapper {
   position: absolute;
   width: auto;
   top: 16px;
   left: 10px;
   padding: 0;
   color: #000;
   z-index: 2;
}


/* supersized background */
.supersized-bg {
   position: absolute;
   width: 112px;
   height: 30px;
   left: 0;
   top: 0;
   background: url(../images/supersized-bg.png);
   background-attachment: fixed;
   background-position: left top;
   background-repeat: no-repeat;
}


/* supersized */
img {
   border: none;
}

#supersized-loader {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 31px;
   height: 31px;
   margin: -30px 0 0 -30px;
   text-indent: -999em;
   background: url(../images/supersized-progress.gif) no-repeat center center;
   z-index: -2;
}

#supersized {
   display: block;
   position: fixed;
   left: 0;
   top: 0;
   overflow: hidden;
   height: 100%;
   width: 100%;
   z-index: -999;
}

#supersized img {
   width: auto;
   height: auto;
   position: relative;
   display: none;
   outline: none;
   border: none;
}

#supersized.speed img {
   -ms-interpolation-mode: nearest-neighbor;
   image-rendering: -moz-crisp-edges;
}

/* Speed */
#supersized.quality img {
   -ms-interpolation-mode: bicubic;
   image-rendering: optimizeQuality;
}

/* Quality */
#supersized li {
   display: block;
   list-style: none;
   position: fixed;
   overflow: hidden;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: none;
   z-index: -30;
}

#supersized a {
   width: 100%;
   height: 100%;
   display: block;
}

#supersized li.prevslide {
   z-index: -20;
}

#supersized li.activeslide {
   z-index: -10;
}

#supersized li.image-loading {
   background: url(../images/supersized-progress.gif) no-repeat center center;
   width: 100%;
   height: 100%;
}

#supersized li.image-loading img {
   visibility: hidden;
}

#supersized li.prevslide img,
#supersized li.activeslide img {
   display: inline;
}


/* general */
body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 12px;
   line-height: 1.5;
   font-style: normal;
   font-weight: normal;
   text-align: center;
   color: #000;
   background: #000;
   -webkit-font-smoothing: antialiased;
   -webkit-text-size-adjust: 100%;
   width: 100%;
   height: 100%;
}

h1 {
   font-family: 'LeagueGothicRegular';
   font-size: 100px;
   font-weight: 100;
   font-style: normal;
   text-align: center;
   text-transform: uppercase;
   -webkit-font-smoothing: antialiased;
   color: #ff3f3f;
   line-height: 1;
   margin: 20px 0 0 0;
   padding: 0;
}

h2 {
   font-family: 'LeagueGothicRegular';
   font-size: 40px;
   font-weight: 100;
   font-style: normal;
   text-align: center;
   text-transform: uppercase;
   -webkit-font-smoothing: antialiased;
   color: #fff;
   line-height: 1;
   margin: 40px 0 20px 0;
   padding: 0;
}

a {
   color: #ff3f3f;
   text-decoration: none;
   outline: none;
}

a:hover {
   color: #fff;
   text-decoration: none;
}

p {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 12px;
   line-height: 1.5;
   font-style: normal;
   font-weight: normal;
   padding: 10px 0 10px 0;
}

p a {
   color: #ff3f3f;
   font-weight: bold;
   text-decoration: none;
}

p a:hover {
   color: #fff;
   text-decoration: none;
   transition: color 0.5s;
}

::-moz-selection {
   background: #555;
   color: #fff;
   /* Firefox */
}

::selection {
   background: #555;
   color: #fff;
   /* Safari */
}


/* layout */
.upper-page {
   min-height: 100%;
   margin: 0;
   padding: 0;
   background: none;
}

.upper-content {
   margin: 0 auto;
   padding: 0;
}

.lower-page {
   min-height: 100%;
   margin: 0;
   padding: 0;
   background: rgba(0, 0, 0, 0.7);
}

.lower-content {
   margin: 0 auto;
   padding: 55px 0 85px 0;
   color: #fff;
}

.lower-content p {
   margin: 0 auto;
   padding: 10px;
   color: #fff;
   text-align: center;
}

.center {
   margin: 0 auto;
}

#about,
#contact {
   display: none;
}

.about-intro,
.contact-intro {
   position: relative;
   width: auto;
   margin: 0;
   padding: 0 0 50px 0;
}

.info-address strong {
   font-weight: bold;
   text-transform: uppercase;
}

.info-phone strong {
   font-weight: bold;
   text-transform: uppercase;
}

.info-email strong {
   font-weight: bold;
   text-transform: uppercase;
}


/* closer */
.fire-closer {
   position: relative;
}

.fire-closer a {
   opacity: 1;
   -moz-opacity: 1;
   -webkit-opacity: 1;
   filter: alpha(opacity=100);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   -webkit-transition: all 0.4s linear;
   -moz-transition: all 0.4s linear;
   -o-transition: all 0.4s linear;
   transition: all 0.4s linear;
   border: none;
   outline: none;
}

.fire-closer a:hover {
   opacity: 0.3;
   -moz-opacity: 0.3;
   -webkit-opacity: 0.3;
   filter: alpha(opacity=30);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}


/* intro */
.intro-wrapper {
   position: relative;
}

.intro {
   margin: 120px auto;
}

.intro h1 {
   font-family: 'LeagueGothicRegular';
   font-size: 140px;
   font-weight: 100;
   font-style: normal;
   text-align: center;
   -webkit-font-smoothing: antialiased;
   color: #fff;
   text-shadow: 1px 1px 2px #000;
   margin: 15px 0 0 0;
   text-transform: none;
}

.intro-color {
   font-family: 'LeagueGothicRegular';
   font-size: 140px;
   font-weight: 100;
   font-style: normal;
   text-align: center;
   -webkit-font-smoothing: antialiased;
   color: #ff3f3f;
   text-shadow: 1px 1px 2px #000;
   margin: 15px 0 0 0;
   text-transform: none;
}

.introduction h3,
.introduction div {
   font-family: 'Roboto', sans-serif;
   font-size: 15px;
   line-height: 1.5;
   font-style: normal;
   font-weight: 400;
   letter-spacing: 1px;
   color: #fff;
   text-shadow: 1px 1px 2px #000;
}

.introduction h3 span,
.introduction div span {
   display: inline-block;
}

.introduction h3 {
   margin: 0 auto;
   width: 400px;
   border-bottom: 1px solid #fff;
   padding: 0 0 15px 0;
}

.intro-line {
   width: 100px;
   height: 1px;
   background: #fff;
   margin: 5px 15px;
}


/* countdown */
#countdown-wrap {
   position: fixed;
   width: 340px;
   height: auto;
   right: 14px;
   bottom: 0;
   text-align: right;
   z-index: 15;
}

#countdown {
   position: relative;
   width: auto;
   height: auto;
   margin: 0;
   padding: 0;
   display: inline-block;
}

ul#countdown li {
   display: inline-block;
   background: none;
   width: 80px;
   text-align: right;
}

ul#countdown li span {
   font-family: 'BebasNeueRegular';
   font-size: 45px;
   font-style: normal;
   font-weight: normal;
   color: #000;
   height: 45px;
   line-height: 45px;
   position: relative;
}

ul#countdown li span::before {
   content: '';
   width: 100%;
   height: 1px;
   position: absolute;
}

ul#countdown li p.timeRefDays,
ul#countdown li p.timeRefHours,
ul#countdown li p.timeRefMinutes,
ul#countdown li p.timeRefSeconds {
   font-family: 'BebasNeueRegular';
   color: #fff;
   text-shadow: 1px 1px 2px #000;
   text-transform: uppercase;
   font-size: 20px;
   margin: 0;
   padding: 0 0 3px 0;
}


/* curtains */
#curtains {
   position: fixed;
   height: 100%;
   width: 100%;
   background: url(../images/curtains.png) repeat top left;
   /* z-index: -1; */
   z-index: 0;
}


/* menu */
.menu {
   position: absolute;
   font-family: 'BebasNeueRegular';
   font-style: normal;
   font-weight: normal;
   left: 14px;
   bottom: 38px;
   width: auto;
   height: auto;
   text-align: left;
   z-index: 1000;
}

.menu a {
   color: #ff3f3f;
   font-weight: normal;
   text-decoration: none;
}

.menu a:hover {
   color: #fff;
}

.menu a.active {
   color: #fff;
   background: none;
}

.menu ul {
   height: auto;
   display: inline-block;
}

.menu ul li {
   position: relative;
   float: left;
   margin: 0;
   padding: 0 20px 0 0;
   width: auto;
}

.menu ul li a {
   font-size: 20px;
   color: #ff3f3f;
   display: block;
   height: auto;
   margin: 0;
   padding: 0;
   outline: none;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}


/* menu mobile */
.menu-mobile {
   display: none;
   visibility: hidden;
}


/* credits */
.credits {
   font-family: 'Roboto', sans-serif;
   font-size: 10px;
   font-style: normal;
   font-weight: 400;
   color: #fff;
   text-transform: uppercase;
   width: auto;
   height: 20px;
   left: 14px;
   bottom: 3px;
   overflow: hidden;
   background: none;
   position: absolute;
   z-index: 10;
}

.credits a,
a:hover {
   color: #fff;
   text-decoration: none;
   outline: none;
}

ul.email-us li {
   position: absolute;
   left: 0;
   bottom: 3px;
   display: block;
}

ul.email-us li a span {
   display: none;
}

a.envelope:link,
a.envelope:visited {
   display: block;
   width: 25px;
   height: 17px;
   background: url(../images/email-us.png) no-repeat left top;
}

a.envelope:hover {
   background-position: left bottom;
}

.address {
   padding: 0 0 0 35px;
}


/* social icons wrapper */
.social-icons-wrapper {
   position: absolute;
   width: auto;
   top: 47px;
   right: 8px;
   padding: 0;
   z-index: 2;
}

.social-icons-wrapper ul {
   float: left;
   margin: 0;
   padding: 0;
   list-style-type: none;
   text-align: center;
   color: #000;
   font-size: 12px;
}

.social-icons-wrapper ul li {
   display: inline;
   padding: 0 0 5px 0;
}


/* social icons */
ul.social-icons {
   margin: 0;
   padding: 0;
}

ul.social-icons a img {
   width: 16px;
   height: 16px;
   padding: 5px 5px 0 5px;
   opacity: 1;
   -moz-opacity: 1;
   -webkit-opacity: 1;
   filter: alpha(opacity=100);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}

ul.social-icons a img:hover {
   padding: 5px 5px 0 5px;
   opacity: 0.5;
   -moz-opacity: 0.5;
   -webkit-opacity: 0.5;
   filter: alpha(opacity=50);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}


/* footer */
#footer {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 85px;
   background: #fff;
   z-index: 15;
}


/* footer background */
.footer-bg {
   /*
width: 251px;
height: 85px;
background: url(../images/footer-bg.png);
background-attachment: fixed;
background-position: left top;
background-repeat: no-repeat;
*/
   width: 251px;
   height: 85px;
   background: url(../images/footer-bg.png) no-repeat;
}


/* contact form */
#form-wrapper {
   width: 545px;
   margin: 0 auto;
   padding: 0;
}

#form {
   margin: 0 auto;
   padding: 20px 0 0 0;
   background: none;
   float: none;
   width: 545px;
   text-align: left;
}

#form div {
   float: left;
   width: 250px;
   position: relative;
   margin: 0;
   padding: 0;
}

#form div label {
   width: 225px;
   display: block;
   font-size: 10px;
   line-height: 11px;
   margin: 0 0 4px 0;
   color: #fff;
}

#form input {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 12px;
   color: #000;
   width: 225px;
   margin: 0 0 10px 0;
   padding: 10px 5px 10px 5px;
   background-color: #fff;
   border: 1px solid #fff;
}

#form .subject {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 12px;
   color: #000;
   width: 235px;
   margin-top: 0;
   margin-right: 0;
   margin-bottom: 5px;
   margin-left: 0;
   padding-top: 8px;
   padding-right: 5px;
   padding-bottom: 8px;
   padding-left: 5px;
   background-color: #fff;
   border: 1px solid #fff;
}

#form textarea {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 12px;
   color: #000;
   width: 280px;
   height: 138px;
   margin: 0 0 10px 0;
   padding: 10px 5px 10px 5px;
   background-color: #fff;
   border: 1px solid #fff;
}

#form input:focus,
#form textarea:focus {
   color: #000;
   background-color: #fff;
}

#form .submit {
   font-family: 'BebasNeueRegular';
   font-size: 15px;
   font-style: normal;
   font-weight: normal;
   text-transform: uppercase;
   text-align: center;
   position: relative;
   width: 80px;
   height: 30px;
   line-height: 30px;
   float: right;
   margin-top: 13px;
   margin-right: -41px;
   padding: 0;
   color: #000;
   background: #fff;
   border: 1px solid #fff;
   cursor: pointer;
}

#form .submit:hover,
#form .submit:focus {
   background-color: #fff;
   color: #000;
}

.success {
   font-family: 'BebasNeueRegular';
   font-size: 15px;
   font-style: normal;
   font-weight: normal;
   text-transform: uppercase;
   text-align: center;
   color: #fff;
   margin: 15px auto 0 auto;
   padding: 0;
   width: 340px;
}

#form .error {
   color: #fff;
   font-size: 10px;
   line-height: 11px;
   position: absolute;
   top: 0;
   right: 15px;
}


/* newsletter animation */
.newsletter-animation ul.button li a {
   background: url(../images/newsletter-trigger.png) no-repeat;
}

.newsletter-animation {
   display: block;
   width: 440px;
   height: 85px;
   position: fixed;
   right: 0;
   bottom: 69px;
   margin: 0;
   overflow: hidden;
   z-index: 14;
}

.newsletter-animation ul.button {
   display: block;
   width: 30px;
   height: 85px;
   position: absolute;
   right: -30px;
   top: 12px;
   z-index: 14;
}

.newsletter-animation ul.button li {
   display: block;
   width: 30px;
   height: 30px;
   margin: 0;
   position: relative;
   overflow: hidden;
}

.newsletter-animation ul.button li a {
   display: block;
   width: 30px;
   height: 30px;
   text-indent: -5000px;
   cursor: pointer;
}

.newsletter-animation ul.button li a.open {
   background-position: -73px -65px;
   position: absolute;
   top: 0;
   left: 30px;
}

.newsletter-animation ul.button li a.open:hover {
   background-position: -73px -6px;
}

.newsletter-animation ul.button li a.close {
   background-position: -12px -65px;
   position: absolute;
   top: 0;
   left: 0;
}

.newsletter-animation ul.button li a.close:hover {
   background-position: -12px -6px;
}

.newsletter-animation .newsletter-bg {
   position: absolute;
   display: block;
   width: 328px;
   height: 69px;
   top: 85px;
   right: 0;
   overflow: hidden;
   background: url(../images/newsletter-bg.png) no-repeat right;
   z-index: 0;
}


/* newsletter form */
.newsletter-wrapper {
   position: absolute;
   width: auto;
   top: 10px;
   right: 44px;
   padding: 0;
   z-index: 2;
}

#subscribe-wrapper {
   position: relative;
   width: 225px;
   height: 55px;
   margin: -4px 0 0 0;
   padding: 0;
   z-index: 2;
}

#newsletter {
   width: auto;
   height: 50px;
   padding: 2px 0 0 0;
}

.newsletter {
   position: relative;
   clear: both;
   width: auto;
   border: none;
   background: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
}

#subscribe .mail {
   display: none;
   visibility: hidden;
}

#subscribe input#subscribeemail {
   width: 140px;
   height: 28px;
   padding: 0 5px 0 5px;
   border: 1px solid #fff;
   font-size: 12px;
   float: left;
   margin: 4px 0 5px 2px;
}

#subscribe input {
   color: #fff;
   text-align: left;
   border: 1px solid #fff;
   background: none;
}

#subscribe input:focus,
#subscribe textarea:focus {
   color: #000;
   background: #fff;
}

#subscribe input#submit {
   font-family: 'BebasNeueRegular';
   font-size: 15px;
   font-style: normal;
   font-weight: normal;
   text-transform: uppercase;
   text-align: center;
   position: relative;
   width: 65px;
   height: 30px;
   line-height: 30px;
   float: right;
   margin: 4px 2px 5px 0;
   padding: 0;
   color: #000;
   background: #fff;
   border: 1px solid #fff;
   cursor: pointer;
}

.subscribesuccess {
   font-family: 'BebasNeueRegular';
   font-size: 15px;
   font-style: normal;
   font-weight: normal;
   text-transform: uppercase;
   text-align: right;
   color: #fff;
   margin: 17px auto 0 auto;
   padding: 0;
}

#subscribe .subscribeerror {
   font-size: 10px;
   text-transform: uppercase;
   text-align: right;
   color: #fff;
   display: block;
   margin: 0;
   padding: 0;
}


/* dividers */
.divider-blank {
   width: auto;
   height: 1px;
   margin: 20px 0 20px 0;
   background: none;
}

.divider-left-top {
   position: absolute;
   left: 5px;
   top: 0;
   width: 10px;
   height: 10px;
   margin: 0;
   padding: 0;
   background: url(../images/left-top.png) no-repeat;
}

.divider-right-top {
   position: absolute;
   right: 5px;
   top: 0;
   width: 10px;
   height: 10px;
   margin: 0;
   padding: 0;
   background: url(../images/right-top.png) no-repeat;
}

.divider-left-bottom {
   position: absolute;
   left: 5px;
   bottom: 0;
   width: 10px;
   height: 10px;
   margin: 0;
   padding: 0;
   background: url(../images/left-bottom.png) no-repeat;
}

.divider-right-bottom {
   position: absolute;
   right: 5px;
   bottom: 0;
   width: 10px;
   height: 10px;
   margin: 0;
   padding: 0;
   background: url(../images/right-bottom.png) no-repeat;
}

.divider-fin {
   width: auto;
   height: 50px;
   background: none;
   margin: 0 auto;
   padding: 0;
}


/* screen loader */
.screen-loader {
   position: absolute;
   width: 100%;
   height: 100%;
   overflow: hidden;
   background: #000;
   z-index: 10000;
}


/* preload */
#preload {
   position: fixed;
   width: 100%;
   height: 100%;
   overflow: hidden;
   right: 0;
   bottom: 0;
   background: #000;
   display: none;
   z-index: 10000;
}

#preload-status {
   position: absolute;
   width: 25px;
   height: 25px;
   margin: auto;
   padding: 0;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: block;
   background: #000 url(../images/preload.gif) no-repeat center center;
}

#preload-status {
   opacity: 1;
   -moz-opacity: 1;
   -webkit-opacity: 1;
   filter: alpha(opacity=100);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}


/* preload content */
.preload-content {
   position: fixed;
   width: auto;
   height: auto;
   margin: 0;
   padding: 0;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: #000;
   opacity: 0.4;
   -moz-opacity: 0.4;
   -webkit-opacity: 0.4;
   filter: alpha(opacity=40);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}


/* extras */
@font-face {
   font-family: 'ecoicon';
   src: url('fonts/ecoicons/ecoicon.eot');
   src: url('fonts/ecoicons/ecoicon.eot?#iefix') format('embedded-opentype'),
      url('fonts/ecoicons/ecoicon.woff') format('woff'),
      url('fonts/ecoicons/ecoicon.ttf') format('truetype'),
      url('fonts/ecoicons/ecoicon.svg#ecoicon') format('svg');
   font-weight: normal;
   font-style: normal;
}


.hi-icon-wrap {
   text-align: center;
   margin: 0 auto;
   padding: 0;
}

.hi-icon {
   display: inline-block;
   font-size: 0px;
   cursor: pointer;
   margin: 15px 30px;
   width: 90px;
   height: 90px;
   border-radius: 50%;
   text-align: center;
   position: relative;
   color: #555;
   z-index: 1;
}

.hi-icon:after {
   pointer-events: none;
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   content: '';
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
}

.hi-icon:before {
   font-family: 'ecoicon';
   speak: none;
   font-size: 48px;
   line-height: 90px;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   display: block;
   -webkit-font-smoothing: antialiased;
}

.hi-icon-mobile:before {
   content: "\e009";
}

.hi-icon-screen:before {
   content: "\e00a";
}

.hi-icon-earth:before {
   content: "\e002";
}

.hi-icon-support:before {
   content: "\e000";
}

.hi-icon-locked:before {
   content: "\e001";
}

.hi-icon-cog:before {
   content: "\e003";
}

.hi-icon-clock:before {
   content: "\e004";
}

.hi-icon-videos:before {
   content: "\e005";
}

.hi-icon-list:before {
   content: "\e006";
}

.hi-icon-refresh:before {
   content: "\e007";
}

.hi-icon-images:before {
   content: "\e008";
}

.hi-icon-pencil:before {
   content: "\e00b";
}

.hi-icon-link:before {
   content: "\e00c";
}

.hi-icon-mail:before {
   content: "\e00d";
}

.hi-icon-location:before {
   content: "\e00e";
}

.hi-icon-archive:before {
   content: "\e00f";
}

.hi-icon-chat:before {
   content: "\e010";
}

.hi-icon-bookmark:before {
   content: "\e011";
}

.hi-icon-user:before {
   content: "\e012";
}

.hi-icon-contract:before {
   content: "\e013";
}

.hi-icon-star:before {
   content: "\e014";
}


/* effect 8 */
.set-8 {
   background: none;
   margin: 20px 0 20px 0;
}

.hi-icon-effect-8 .hi-icon {
   background: rgba(255, 255, 255, 0.1);
   -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
   -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
   transition: transform ease-out 0.1s, background 0.2s;
   color: #fff;
}

.hi-icon-effect-8 .hi-icon:after {
   top: 0;
   left: 0;
   padding: 0;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
   opacity: 0;
   -moz-opacity: 0;
   -webkit-opacity: 0;
   filter: alpha(opacity=0);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   -webkit-transform: scale(0.9);
   -moz-transform: scale(0.9);
   -ms-transform: scale(0.9);
   transform: scale(0.9);
   z-index: -1;
}

.no-touch .hi-icon-effect-8 .hi-icon:hover {
   background: rgba(255, 255, 255, 0.05);
   -webkit-transform: scale(0.93);
   -moz-transform: scale(0.93);
   -ms-transform: scale(0.93);
   transform: scale(0.93);
   color: #fff;
}

.hi-icon-effect-8 .hi-icon:hover:after {
   -webkit-animation: sonarEffect 1.3s ease-out 75ms;
   -moz-animation: sonarEffect 1.3s ease-out 75ms;
   animation: sonarEffect 1.3s ease-out 75ms;
}


@-webkit-keyframes sonarEffect {
   0% {
      opacity: 0.3;
   }

   40% {
      opacity: 0.5;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 0.5);
   }

   100% {
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 0.5);
      -webkit-transform: scale(1.5);
      opacity: 0;
   }
}


@-moz-keyframes sonarEffect {
   0% {
      opacity: 0.3;
   }

   40% {
      opacity: 0.5;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 0.5);
   }

   100% {
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 0.5);
      -moz-transform: scale(1.5);
      opacity: 0;
   }
}


@keyframes sonarEffect {
   0% {
      opacity: 0.3;
   }

   40% {
      opacity: 0.5;
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 0.5);
   }

   100% {
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 0.5);
      transform: scale(1.5);
      opacity: 0;
   }
}