html, body {
  margin: 0px;
  padding: 0px;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  cursor: default;
  overflow: hidden;
}
html {
  background-color: #F1F1F1
}
#main_wrapper {
  position: relative;
  z-index: 2;
  opacity: 0;
}
#loader {
  position: absolute;
  width: 32px;
  height: 32px;
  background-image: url(../img/loader_white.gif);
}

/* HEADER */
#header_content {
  position: relative;
  width: 100%;
  height: 50%;
  z-index: 5;
  background-color: hsla(0, 0%, 100%, 0);
}
#header {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 90px;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.25);
}
#header #logo {
  position: relative;
  top: 23px;
  left: 35px;
  width: 200px;
  height: 50px;
  background-image: url(../img/logo.png);
}
#contact_icons {
  position: relative;
  top: -30px;
  float: right;
  padding-right: 25px;
}
#contact_icons_mobile {
  display: none
}
#contact_icons a:last-child, #contact_icons_mobile a:last-child {
  margin: 0px
}
a.icons {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 0px 10px 0px 0px;
  cursor: pointer;
}
.fb {
  background-image: url(../img/icons_en.png)
}
.tw {
  background-image: url(../img/icons_en.png)
}
.in {
  background-image: url(../img/icons_linkedin.png)
}
/* MAIN CONTENT */
#main_content {
  position: relative;
  z-index: 10;
  height: 50%;
  padding: 0px 25px;
  background-color: hsla(0, 0%, 90%, 0.8);
}
div.title {
  text-align: center;
  font-family: 'Lato', sans-serif;
}
div.title > h3 {
  font-size: 200%;
  font-weight: 600;
  color: #958164;

}
div.title > h1 {
  font-size: 350%;
  font-weight: 300;
  padding: 35px 0px 15px 0px;
  color: #000000;

}
div#contents {
  text-align: center;
  padding-top: 50px;
}

/* FORM */
fieldset {
  width: 35%;
  margin: 0px auto;
  padding: 10px 0px 15px 0px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid hsla(0, 0%, 0%, 0.25);
  box-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.25);
}
fieldset > input#submitEmail {
  border: none;
  background: linear-gradient(#EEE, #999);
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  padding: 7px 20px;
  color: hsla(0, 0%, 15%, 0.75);
  cursor: pointer;
  border-radius: 5px;
  letter-spacing: 1px;
  box-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.5);
}
fieldset > input#txtEmail {
  width: 80%;
  margin: 10px auto 20px auto;
  height: 19px;
  border: 1px solid hsla(0, 0%, 0%, 0.25);
  background-color: hsla(0, 0%, 75%, 0.15);
  color: hsla(0, 0%, 35%, 0.75);
  font-family: 'Roboto', sans-serif;
  padding: 5px 5px 7px 5px;
  text-align: center;
}
fieldset > input#txtEmail:focus, fieldset > input#submitEmail {
  outline: 0px
}
legend {
  margin: 0px auto;
  text-align: center;
  font-size: 125%;
  padding: 0px 15px;
  letter-spacing: 2px;
  color: hsla(0, 0%, 15%, 0.75);
}
@-moz-document url-prefix() { 
    legend {
      position: relative;
      display: block;
      float: left;
      width: 100%;
      padding: 0px;
    }
}
::-webkit-input-placeholder {
  /* WebKit browsers */ color: #666; 
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */ color: #666; 
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */ color: #666; 
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */ color: #666; 
}
div.email_alert {
  font-size: 150%;
  font-weight: 600;
  color: #958164;
  padding: 20px 0px 10px 0px;
  font-family: 'Lato', sans-serif;
}

/* FOOTER */
div#footer {
  position: absolute;
  z-index: 50;
  width: 100%;
  bottom: 0px;
  background-color: hsla(0, 0%, 25%, 0.75);
  text-align: center;
}
div#footer > div {
  color: hsla(0, 0%, 100%, 0.75);
  padding: 20px 0px;
}

/* SLIDESHOW */
ul, li {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
#backgrounds {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0;
}
#backgrounds > ul#main_slideshow {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
#backgrounds li.selected {
  display: block;
  z-index: 3;
}
#backgrounds li {
  position: absolute
}
#backgrounds li > figure {
  position: absolute
}
#overlay {
  position: absolute;
  z-index: 4;
  width: 100%;
  height: 100%;
  background-image: url(../img/bg_01.png);
}

/* TIMER */
#countdown {
  position: absolute;
  z-index: 10;
  top: 42%;
}
.countdownHolder {
  position: relative;
  right: 20px;
  height: 100%;
  font-size: 950%;
  font-weight: 300;
}
.position {
  position: relative;
  padding: 0px 30px;
  min-height: 1px;
  float: left;
}
.digit {
  position: absolute;
  nowhitespace: afterproperty;
  color: hsla(25, 0%, 100%, 0.85);
  text-shadow: 0px 2px 5px hsla(0, 0%, 0%, 0.75);
}
.countDiv {
  width: 50px;
  float: left;
  text-align: center;
}
.legend_txt {
  position: absolute;
  nowhitespace: afterproperty;
  left: 40px;
  top: 125px;
  font-size: 12%;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: hsla(0, 0%, 100%, 0.75);
  text-shadow: 0px 1px 3px hsla(0, 0%, 0%, 0.75);
  font-weight: 300; ;
}
.countDays, .countHours, .countMinutes, .countSeconds {
  position: relative;
  height: 100%;
  float: left;
  text-align: left;
  border-left: 1px solid hsla(0, 0%, 100%, 0.25);
}
.countDiv {
  visibility: hidden
}
.legend_days, .legend_hours, .legend_minutes, .legend_seconds {
  position: relative
}


/* MEDIA WIDTH */
@media (max-width: 1280px) { 
    fieldset { width: 40% }
}
@media (max-width: 1240px) { 
    fieldset { width: 50% }
}
@media (max-width: 1024px) { 
    .countdownHolder { font-size: 800% }
    .position { padding: 0px 25px }
    .legend_txt { top: 105px }
    fieldset { width: 60% }
}
@media (max-width: 800px) { 
    .countdownHolder { font-size: 640% }
    .position { padding: 0px 20px }
    .legend_txt { left: 27px; top: 90px; font-size: 14%; }
    div.title > h1 { font-size: 300% }
    div.title > h3 { font-size: 150% }
    fieldset { width: 70% }
}
@media (max-width: 550px) { 
    .countdownHolder { font-size: 500% }
    .position { padding: 0px 15px }
    .legend_txt { left: 21px; top: 72px; }
    div.title > h1 { font-size: 250% }
    div.title > h3 { font-size: 120% }
    fieldset { width: 80% }
    div.email_alert { font-size: 120% }
}
@media (max-width: 460px) { 
    #header #logo { left: 15px }
    #contact_icons { top: -5px; padding-right: 5px; }
    a.icons { width: 35px; height: 35px; margin: 0px 7px 0px 0px; }
    .fb { background-image: url(../img/icons_en_m.png) }
    .tw { background-image: url(../img/icons_twitter_low.png) }
    .in { background-image: url(../img/icons_linkedin_low.png) }
    .countdownHolder { font-size: 500% }
    .position { padding: 0px 15px }
    .countDiv { width: 20px }
    .legend_txt { left: 21px; top: 72px; }
    div.title > h1 { font-size: 210% }
    div.title > h3 { font-size: 100% }
    fieldset { width: 90% }
    legend { font-size: 100%; letter-spacing: 2px; }
    div.email_alert { font-size: 100%; padding: 10px 0px 5px 0px; }
}
@media (max-width: 350px) { 
    #contact_icons { display: none }
    #contact_icons_mobile { display: block; position: absolute; width: 131px; bottom: 55px; opacity: 0.75; }
    #countdown { top: 55% }
    .countdownHolder { font-size: 400% }
    .position { padding: 0px 12px }
    .countDiv { width: 20px }
    .legend_txt { left: 16px; top: 55px; }
    div.title > h1 { font-size: 150% }
    div#footer > div { font-size: 80% }
}

@media (max-width: 300px) { 
    #countdown { top: 55% }
    .countdownHolder { font-size: 300% }
    .position { padding: 0px 9px }
    .countDiv { width: 10px }
    .legend_txt { left: 12px; top: 44px; }
    div.title > h1 { font-size: 150% }
    div#footer > div { font-size: 80% }
}


/* MEDIA HEIGHT */
@media (max-height: 850px) { 
    #header_content { height: 40% }
    #main_content { height: 60% }
}
@media (max-height: 700px) { 
    div.title > h1 { padding: 25px 0px 15px 0px }
}
@media (max-height: 670px) { 
    div.title > h1 { font-size: 210%; padding: 25px 0px 15px 0px; }
    div.title > h3 { font-size: 100% }
    div#contents { padding-top: 20px }
    div.email_alert { font-size: 100%; padding: 10px 0px 5px 0px; }
    div#footer > div { padding: 10px 0px }
	#contact_icons_mobile {bottom: 45px;}
}
@media (max-height: 580px) { 
    div.title > h1 { font-size: 150%; padding: 15px 0px 5px 0px; }
    fieldset { padding: 5px 0px 10px 0px }
	fieldset > input#submitEmail { padding: 4px 20px; }
	#contact_icons_mobile {bottom: 40px;}
    div#contents { padding-top: 20px }
}
@media (max-height: 500px) { 
    #header { height: 60px }
    #header #logo { top: 15px; left: 15px; }
    #contact_icons { top: -20px; padding-right: 5px; }
    a.icons { width: 35px; height: 35px; margin: 0px 7px 0px 0px; }
    .fb { background-image: url(../img/icons_en_m.png) }
    .tw { background-image: url(../img/icons_twitter_low.png) }
    .in { background-image: url(../img/icons_linkedin_low.png) }
    div.title > h1 { font-size: 150%; padding: 15px 0px 5px 0px; }
    div#contents { padding-top: 15px }
    fieldset { padding: 3px 0px 6px 0px }
    fieldset > input#txtEmail { margin: 5px auto 7px auto; height: 13px; padding: 5px 5px 7px 5px; }
	fieldset > input#submitEmail { padding: 1px 20px; }
    div.email_alert { font-size: 100% }
	#contact_icons_mobile {bottom: 35px;}
}


/* MEDIA MOBILE */
@media only screen and (max-device-width:480px) and (max-device-height:854px) and (-webkit-min-device-pixel-ratio: 1.5) { 
    html, body { font-size: 6.5px }
    #header_content { height: 40% }
    #main_content { height: 60% }
    #contact_icons { display: none }
    #contact_icons_mobile { display: block; position: absolute; width: 131px; bottom: 40px; opacity: 0.75; }
    a.icons { width: 35px; height: 35px; margin: 0px 7px 0px 0px; }
    .fb { background-image: url(../img/icons_en_m.png) }
    .tw { background-image: url(../img/icons_twitter_low.png) }
    .in { background-image: url(../img/icons_linkedin_low.png) }
    #countdown { top: 50% }
    .countdownHolder { font-size: 600%; right: 10px; color: orange; }
    .position { padding: 0px 10px }
    .countDiv { width: 15px }
    .legend_txt { left: 13px; top: 45px; font-size: 11%; letter-spacing: 1px; }
    div.title > h1 { font-size: 275% }
    div.title > h3 { font-size: 200% }
    div#contents { padding-top: 25px }
    div.email_alert { font-size: 200%; padding: 10px 0px 10px 0px; }
}
@media only screen and (max-device-width:854px) and (max-device-height:480px) and (-webkit-min-device-pixel-ratio: 1.5) { 
    html, body { font-size: 6.5px }
    #header_content { height: 70% }
    #main_content { height: 70% }
    #contact_icons { display: block }
    #contact_icons_mobile { display: none }
    a.icons { width: 35px; height: 35px; margin: 0px 7px 0px 0px; }
    .fb { background-image: url(../img/icons_en_m.png) }
    .tw { background-image: url(../img/icons_twitter_low.png) }
    .in { background-image: url(../img/icons_linkedin_low.png) }
    #countdown { top: 50% }
    .countdownHolder { font-size: 600%; right: 10px; color: orange; }
    .position { padding: 0px 10px }
    .countDiv { width: 15px }
    .legend_txt { left: 13px; top: 45px; font-size: 11%; letter-spacing: 1px; }
    div.title > h1 { font-size: 275% }
    div.title > h3 { font-size: 200% }
    div#contents { padding-top: 25px }
    div.email_alert { font-size: 200%; padding: 10px 0px 10px 0px; }
    div#footer { position: relative }
}