/*
Theme Name:     Noir
Description:    Countdown
Author:         Vagebond
Theme URI:      http://vagebond.nl/noir
Author URI:     http://themeforest.net/user/StudioVagebond
Version:        1.0

----------------------------------------------------------------------------------------------------------------------------

Table of contents :
Foreword: We've built this template with less and we would like to recommend you to use less as this is set-up with
this pre-processor in mind. You can however also edit the style.css to fit your needs.

If you have no experience with less, a good place to start would be :
http://lesscss.org/

And if you need a less compiler that compiles your files neatly into one packed css: (both are free)
- mac: http://wearekiss.com/simpless
- windows: http://winless.org/


----------------------------------------------------------------------------------------------------------------------------

01. Bootstrap files:
	- variables.less : Edit these to fit your needs. To change colors, font-sizes, logo-size, animation-speeds etc.
	- mixins.less : A handy set of tools to reduce workload and increase browser support.
	- site-elements.less : General elements that can be used (social icons, gallery, ...)
	- animations.less (Transitions and animations)
	- forms.less (The styling of your forms)

02. Required libs
	- featherlight.less (a lightweight lightbox plugin)

03. Custom fonts
	- fontaswesome.less
	- sans-serif.less
	- display.less

04. Noir styles
	- style.less
	- modules
		- shared.less
			- mobile.less
		- home.less
			- mobile.less
		- sign-up.less
			- mobile.less
		- about.less
			- mobile.less

----------------------------------------------------------------------------------------------------------------------------
*/
/*

Begin of mixins: These are tools to make your development easier.
They reduce workload and enhance browser support by creating functions
for much needed tasks.

They can however only be used with less. The location of this file is :
css/common/mixins.less

*/
.bb {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(30%);
  -ms-transform: translateY(30%);
  transform: translateY(30%);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.hide {
  display: none;
}
.notransition {
  -o-transition-property: none !important;
  -moz-transition-property: none !important;
  -ms-transition-property: none !important;
  -webkit-transition-property: none !important;
  transition-property: none !important;
  /*CSS transforms*/
  -o-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -webkit-transform: none !important;
  transform: none !important;
  /*CSS animations*/
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
}
/* End of mixins */
/* General site elements and resets */
/* Href and .button styling */
a,
button {
  text-decoration: none;
  color: #ffffff;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  font-family: 'Montserrat', sans-serif;
}
/* White theme setup */
.white a,
.white button {
  color: #000000;
}
/* End of href .button styling */
/* Styling of the .button class (exmpl. subscibe button on homepage) */
.button {
  border: 1px solid #ffffff;
  font-size: 18px;
  font-size: 1.8rem;
  text-transform: uppercase;
  padding: 12px 15px;
  display: inline-block;
  letter-spacing: .1em;
}
.button:hover {
  border-color: transparent;
  background-color: #ffffff;
  color: #000000;
}
button.button {
  padding: 10px 15px;
}
/* White theme setup */
.white .button {
  border-color: #000000;
}
.white .button:hover {
  background-color: #000000;
  color: #ffffff;
}
/* end of .button class styling */
/** line icons styling */
i.icon {
  display: inline-block;
  margin: 60px 0 25px 0;
  color: #009cff;
}
i.icon:before {
  font-family: "et-line";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  speak: none;
  line-height: 1;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  content: "\e012";
  font-size: 24px;
  font-size: 2.4rem;
}
i.icon.expand:before {
  content: "\e01a";
}
i.icon.envelope:before {
  content: "\e028";
}
i.icon.megaphone:before {
  content: "\e021";
}
i.icon.chat:before {
  content: "\e049";
}
i.icon.mobile:before {
  content: "\e000";
}
i.icon.speedometer:before {
  content: "\e051";
}
i.icon.gears:before {
  content: "\e02b";
}
i.icon.tablet:before {
  content: "\e003";
}
i.icon.pin:before {
  content: "\e047";
}
/** end of line icons styling */
/** start of services styling */
section.icon-list {
  overflow: hidden;
}
section.icon-list.one-third article {
  width: 33.3%;
}
section.icon-list article {
  display: inline-block;
  float: left;
  width: 50%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 15px;
}
section.icon-list article h1,
section.icon-list article h2,
section.icon-list article h3,
section.icon-list article h4,
section.icon-list article h5 {
  margin: 0 0 10px 0;
  text-transform: none;
}
section.icon-list article i {
  margin: 30px 0 25px 0;
}
section.icon-list article i:before {
  font-size: 36px;
  font-size: 3.6rem;
}
section.icon-list article p {
  font-size: 14px;
  font-size: 1.4rem;
  color: #b3b3b3;
}
section.icon-list article a {
  display: block;
  line-height: 1.5;
}
/* The styling of the gallery */
section.gallery {
  margin: 40px 0;
  width: 100%;
}
section.gallery ul,
section.gallery li,
section.gallery figure,
section.gallery a {
  margin: 0;
}
section.gallery ul {
  padding: 0;
  list-style: none;
  display: block;
  overflow: hidden;
  background-color: #000000;
}
section.gallery ul li {
  display: inline-block;
  width: calc(50% - 2px);
  float: left;
  margin: 0 2px 3px 0;
}
section.gallery ul li figure {
  position: relative;
  height: 330px;
  width: 100%;
  overflow: hidden;
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
}
section.gallery ul li figure a {
  border: none;
  padding: 0;
  width: 100%;
  position: relative;
  line-height: 0;
  display: block;
  height: 330px;
}
section.gallery ul li figure a .overlay {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  margin: auto;
  z-index: 1;
  background-color: #000000;
  height: 0;
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
section.gallery ul li figure a .overlay .container {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  margin: auto;
}
section.gallery ul li figure a .overlay .container h1,
section.gallery ul li figure a .overlay .container h2,
section.gallery ul li figure a .overlay .container h3,
section.gallery ul li figure a .overlay .container h4,
section.gallery ul li figure a .overlay .container h5,
section.gallery ul li figure a .overlay .container span,
section.gallery ul li figure a .overlay .container i {
  text-align: center;
}
section.gallery ul li figure a .overlay .container i,
section.gallery ul li figure a .overlay .container span {
  display: block;
}
section.gallery ul li figure a .overlay .container i {
  color: #009cff;
}
section.gallery ul li figure a .overlay .container span {
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  font-size: 10px;
  font-size: 1rem;
  letter-spacing: .1em;
}
section.gallery ul li figure a:hover {
  color: white;
  background-color: transparent;
}
section.gallery ul li figure a:hover .overlay {
  height: calc(100% - 40px);
}
section.gallery ul li figure a:hover .overlay .container {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
  opacity: 1;
  filter: alpha(opacity=100);
}
.white section.gallery ul {
  background-color: white;
}
/* End of styling gallery */
/* V-card styling */
section.v-card {
  margin-bottom: 30px;
}
section.v-card h1,
section.v-card h2,
section.v-card h3,
section.v-card h4,
section.v-card h5 {
  margin: 20px 0;
}
section.v-card .adr p {
  margin: 0;
}
section.v-card a {
  margin: 5px;
  border-bottom: 1px solid #ffffff;
  padding: 3px 6px;
  display: inline-block;
  font-size: 18px;
  font-size: 1.8rem;
}
section.v-card a.street-address:before {
  font-family: "fontawesome";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  speak: none;
  line-height: 1;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  content: "\f041";
  margin: 0 10px 0 0;
}
section.v-card a:hover {
  background-color: #ffffff;
  color: #000000;
  border-color: transparent;
}
section.v-card a.phone:before {
  font-family: "fontawesome";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  speak: none;
  line-height: 1;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  content: "\f095";
}
section.v-card a.email:before {
  font-family: "fontawesome";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  speak: none;
  line-height: 1;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  content: "\f0e0";
}
/* White theme setup */
.white section.v-card a {
  border-bottom: 1px solid #000000;
  color: #000000;
}
.white section.v-card a:hover {
  background-color: #000000;
  color: #ffffff;
  border-color: transparent;
}
/* End of v-card styling */
/* Styling the close back button that can be found at the top of each sub page (signup and about) */
a.close-back {
  width: 40px;
  height: 40px;
  display: block;
  padding: 20px;
  margin: 60px auto 0 auto;
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
a.close-back span {
  position: relative;
  display: block;
  color: #ffffff;
  height: .1em;
  font-size: 16px;
  font-size: 1.6rem;
}
a.close-back span:before,
a.close-back span:after {
  background-color: #ffffff;
  height: .1em;
  width: 100%;
  position: absolute;
  content: '';
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  left: 0;
}
a.close-back span:before {
  -webkit-transform: rotate(45deg) translate(0.4em, 0.4em);
  -ms-transform: rotate(45deg) translate(0.4em, 0.4em);
  transform: rotate(45deg) translate(0.4em, 0.4em);
}
a.close-back span:after {
  -webkit-transform: rotate(-45deg) translate(-0.4em, 0.4em);
  -ms-transform: rotate(-45deg) translate(-0.4em, 0.4em);
  transform: rotate(-45deg) translate(-0.4em, 0.4em);
}
a.close-back:hover span:before {
  -webkit-transform: rotate(45deg) translateX(1.2em);
  -ms-transform: rotate(45deg) translateX(1.2em);
  transform: rotate(45deg) translateX(1.2em);
}
a.close-back:hover span:after {
  -webkit-transform: rotate(-45deg) translateX(-1.2em);
  -ms-transform: rotate(-45deg) translateX(-1.2em);
  transform: rotate(-45deg) translateX(-1.2em);
}
/* White theme setup */
.white a.close-back span {
  color: #000000;
}
.white a.close-back span:before,
.white a.close-back span:after {
  background-color: #000000;
}
/* End of closeback styling */
/* Styling of social bar, add classes to ul to use correct icon*/
ul.social {
  padding: 0;
  margin: 0;
}
ul.social li {
  display: inline-block;
  margin-right: 3px;
}
ul.social li a {
  font-size: 12px;
  font-size: 1.2pxrem;
  padding: 10px;
  border-radius: 50%;
  background-color: #000000;
  display: inline-block;
  width: 12px;
  border-color: transparent;
  text-align: center;
}
ul.social li a:before {
  font-family: "fontawesome";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  speak: none;
  line-height: 1;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
ul.social li a:hover {
  background-color: #ffffff;
  color: #000000;
}
ul.social li a.facebook:before {
  content: "\f003";
}
ul.social li a.twitter:before {
  content: "\f099";
}
ul.social li a.behance:before {
  content: "\f1b4";
}
ul.social li a.instagram:before {
  content: "\f16d";
}
ul.social li a.gplus:before {
  content: "\f0d5";
}
ul.social li a.foursquare:before {
  content: "\f180";
}
ul.social li a.dribbble:before {
  content: "\f17d";
}
ul.social li a.linkedin:before {
  content: "\f0e1";
}
ul.social li a.tumblr:before {
  content: "\f173";
}
ul.social li a.yelp:before {
  content: "\f1e9";
}
ul.social li a.delicious:before {
  content: "\f1a5";
}
ul.social li a.pinterest:before {
  content: "\f0d2";
}
ul.social li a.vine:before {
  content: "\f1ca";
}
/* White theme setup */
.white ul.social li a {
  background-color: #000000;
  border-color: transparent;
  color: #ffffff;
}
.white ul.social li a:hover {
  background-color: #ffffff;
  color: #000000;
}
/* End of social bar styling*/
/* Resets, styling of elements and typography */
h1,
h2,
h3,
h4,
h5 {
  text-transform: uppercase;
  display: block;
  margin: 50px 0;
  line-height: 1.2;
  letter-spacing: .05em;
}
h1 {
  font-size: 48px;
  font-size: 4.8rem;
}
h2 {
  font-size: 38px;
  font-size: 3.8rem;
}
h3 {
  font-size: 28px;
  font-size: 2.8rem;
}
h4 {
  font-size: 23px;
  font-size: 2.3rem;
}
h5 {
  font-size: 18px;
  font-size: 1.8rem;
}
p,
span,
strong {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.5;
}
.subheader {
  margin-top: 0;
}
.header {
  margin-bottom: 20px;
}
figure {
  margin: 50px 0;
  max-width: 100%;
}
img {
  max-width: 100%;
  display: inline-block;
}
ul,
ol {
  margin: 60px 0;
}
ul li,
ol li {
  text-align: left;
  margin: 10px 0;
  font-size: 16px;
  font-size: 1.6rem;
}
ul li p,
ol li p,
ul li span,
ol li span,
ul li a,
ol li a,
ul li strong,
ol li strong {
  display: inline-block;
  line-height: 1;
}
ul li a,
ol li a {
  margin-bottom: 5px;
  border-bottom: 1px solid #ffffff;
  padding: 3px 6px;
  display: inline-block;
}
ul li a:hover,
ol li a:hover {
  background-color: #ffffff;
  color: #000000;
  border-color: transparent;
}
.white ul li a,
.white ol li a {
  border-bottom: 1px solid #000000;
}
.white ul li a:hover,
.white ol li a:hover {
  background-color: #000000;
  color: #ffffff;
  border-color: transparent;
}
span.divider {
  display: inline-block;
  width: 40px;
  height: 2px;
  background-color: #ffffff;
  margin: 25px 0 50px 0;
}
/* clearfix helper class */
.no-scroll {
  overflow: hidden;
}
/* The menu */
.trigger {
  position: fixed;
  margin: auto;
  left: 20px;
  top: 15px;
  z-index: 4;
  width: 105px;
  height: 50px;
  letter-spacing: .1em;
  font-weight: bold;
  font-size: 12px;
  font-size: 1.2rem;
  text-transform: uppercase;
  line-height: 24px;
}
.trigger.hide-label {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
}
.trigger span,
.trigger span::before,
.trigger span::after {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #ffffff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.trigger span {
  top: 10px;
  left: 0;
  -webkit-transition: background 0.2s 0.5s;
  -moz-transition: background 0.2s 0.5s;
  transition: background 0.2s 0.5s;
}
.trigger span:before,
.trigger span:after {
  content: '';
  left: 0;
  -webkit-transition: -webkit-transform 0.2s 0.5s;
  -moz-transition: -moz-transform 0.2s 0.5s;
  transition: transform 0.2s 0.5s;
}
.trigger span:before {
  bottom: 6px;
}
.trigger span:after {
  top: 6px;
}
.trigger.active {
  -webkit-transform: translateX(300px);
  -ms-transform: translateX(300px);
  transform: translateX(300px);
}
.trigger.active span {
  background-color: rgba(255, 255, 255, 0);
}
.trigger.active span:before {
  -webkit-transform: translateY(6px) rotate(-45deg);
  -moz-transform: translateY(6px) rotate(-45deg);
  -ms-transform: translateY(6px) rotate(-45deg);
  -o-transform: translateY(6px) rotate(-45deg);
  transform: translateY(6px) rotate(-45deg);
}
.trigger.active span:after {
  -webkit-transform: translateY(-6px) rotate(45deg);
  -moz-transform: translateY(-6px) rotate(45deg);
  -ms-transform: translateY(-6px) rotate(45deg);
  -o-transform: translateY(-6px) rotate(45deg);
  transform: translateY(-6px) rotate(45deg);
}
.trigger.active span::before,
.trigger.active span::after {
  background-color: white;
}
nav {
  position: fixed;
  overflow-y: scroll;
  width: 300px;
  left: 0;
  background-color: #111111;
  text-align: left;
  z-index: 3;
  height: 100%;
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  -webkit-transform: translateX(-300px);
  -ms-transform: translateX(-300px);
  transform: translateX(-300px);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 25px;
}
nav.active {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
nav h5,
nav ul {
  margin: 0;
}
nav h5 {
  margin-top: 50px;
  line-height: 1;
  padding: 10px 0;
  font-size: 12px;
  font-size: 1.2rem;
  color: #333333;
}
nav h5:before {
  font-family: "fontawesome";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  speak: none;
  line-height: 1;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  content: "\f14e";
  margin-right: 10px;
  font-size: 18px;
  font-size: 1.8rem;
  vertical-align: middle;
}
nav h5:first-child {
  margin-top: 0;
}
nav h5.cog:before {
  content: "\f013";
}
nav h5.check:before {
  content: "\f00c";
}
nav h5.marker:before {
  content: "\f041";
}
nav h5.zoom:before {
  content: "\f00e";
}
nav ul {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}
nav ul li {
  margin: 0;
  margin: 5px 0;
}
nav ul li:last-child {
  border-bottom: none;
}
nav ul li a {
  margin-left: 0;
  padding-left: 0;
  text-decoration: none;
  border: none;
  line-height: 1.5;
  font-size: 16px;
  font-size: 1.6rem;
  opacity: 0.2;
  filter: alpha(opacity=20);
  text-transform: uppercase;
}
nav ul li a.active,
nav ul li a:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  color: #ffffff;
  background-color: transparent;
  vertical-align: middle;
}
nav ul li a:before {
  font-family: "fontawesome";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  speak: none;
  line-height: 1;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  margin-right: 15px;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 2;
}
nav ul li a.icon-home:before {
  content: "\f015";
}
nav ul li a.icon-about:before {
  content: "\f0f6";
}
nav ul li a.icon-subscribe:before {
  content: "\f0e0";
}
nav ul li a.icon-gallery:before {
  content: "\f02d";
}
nav ul li a.icon-services:before {
  content: "\f013";
}
nav ul li a.icon-contact:before {
  content: "\f086";
}
nav ul li a.icon-clients:before {
  content: "\f0c0";
}
.white section.icon-list article p {
  color: #666666;
}
.white span.divider {
  background-color: #000000;
}
.white .trigger.active span {
  background-color: rgba(255, 255, 255, 0);
}
.white .trigger span {
  background-color: #000000;
}
.white .trigger span:before,
.white .trigger span:after {
  background-color: #000000;
}
.white nav {
  background-color: #ffffff;
}
.white nav ul li a {
  margin-left: 0;
  padding-left: 0;
  font-size: 16px;
  font-size: 1.6rem;
  opacity: 0.4;
  filter: alpha(opacity=40);
  text-transform: uppercase;
  border: none;
}
.white nav ul li a.active,
.white nav ul li a:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  color: #000000;
  background-color: transparent;
}
/* End of menu */
/* End of resets, elements and typography */
.hide {
  opacity: 0;
}
/* Mobile styling of site-elements */
@media screen and (max-width: 480px) {
  a.close-back {
    margin: 20px auto;
  }
  ul.social li {
    margin: 8px;
  }
  section.gallery ul li {
    width: 100%;
  }
  section.gallery ul li figure {
    height: 230px;
  }
  h1,
  h2,
  h3,
  h4,
  h5 {
    margin: 25px 0;
  }
  h1 {
    font-size: 38px;
    font-size: 3.8rem;
  }
  h2 {
    font-size: 33px;
    font-size: 3.3rem;
  }
  h3 {
    font-size: 23px;
    font-size: 2.3rem;
  }
  h4 {
    font-size: 18px;
    font-size: 1.8rem;
  }
  h5 {
    font-size: 13px;
    font-size: 1.3rem;
  }
  .trigger {
    z-index: 4;
    top: 20px;
    left: 25px;
    position: fixed;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    color: transparent;
  }
  .trigger.active {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  nav {
    width: 100%;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    padding: 55px 25px;
  }
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
  section.gallery ul li figure {
    height: 300px;
  }
}
/* End mobile styling of site-elements */
/* Start of animations used in css */
/*define generally used animation to fade in elements */
.fadeIn {
  -webkit-animation: fadeInAnimation 1s;
  -moz-animation: fadeInAnimation 1s;
  -o-animation: fadeInAnimation 1s;
  animation: fadeInAnimation 1s;
}
@-webkit-keyframes fadeInAnimation {
  from {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@-moz-keyframes fadeInAnimation {
  from {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@keyframes fadeInAnimation {
  from {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
/*define generally used animation to fade out elements */
.fadeOut {
  -webkit-animation: fadeOutAnimation 1s;
  -moz-animation: fadeOutAnimation 1s;
  -o-animation: fadeOutAnimation 1s;
  animation: fadeOutAnimation 1s;
}
@-webkit-keyframes fadeOutAnimation {
  from {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  to {
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@-moz-keyframes fadeOutAnimation {
  from {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  to {
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@keyframes fadeOutAnimation {
  from {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  to {
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
/* Start of animations used in css */
/*define generally used animation to fade in elements */
.domSlideAnimateIn {
  -webkit-animation: domSlideAnimateInFrames 0.6s;
  -moz-animation: domSlideAnimateInFrames 0.6s;
  -o-animation: domSlideAnimateInFrames 0.6s;
  animation: domSlideAnimateInFrames 0.6s;
}
@-webkit-keyframes domSlideAnimateInFrames {
  from {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  to {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
@-moz-keyframes domSlideAnimateInFrames {
  from {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  to {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes domSlideAnimateInFrames {
  from {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  to {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}
/*define generally used animation to fade out elements */
.domSlideAnimateOut {
  -webkit-animation: domSlideAnimateOutFrames 0.6s;
  -moz-animation: domSlideAnimateOutFrames 0.6s;
  -o-animation: domSlideAnimateOutFrames 0.6s;
  animation: domSlideAnimateOutFrames 0.6s;
}
@-webkit-keyframes domSlideAnimateOutFrames {
  from {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
@-moz-keyframes domSlideAnimateOutFrames {
  from {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
@keyframes domSlideAnimateOutFrames {
  from {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
/*define animation to animate in sub pages (signup and about)*/
.animateIn {
  -webkit-animation: animateInDefault 0.8s ease;
  -moz-animation: animateInDefault 0.8s ease;
  -o-animation: animateInDefault 0.8s ease;
  animation: animateInDefault 0.8s ease;
}
@-webkit-keyframes animateInDefault {
  from {
    top: 100%;
  }
  to {
    top: 0;
  }
}
@-moz-keyframes animateInDefault {
  from {
    top: 100%;
  }
  to {
    top: 0;
  }
}
@keyframes animateInDefault {
  from {
    top: 100%;
  }
  to {
    top: 0;
  }
}
/*define animation to animate out sub pages (signup and about)*/
.animateOut {
  -webkit-animation: animateOutDefault 0.8s ease;
  -moz-animation: animateOutDefault 0.8s ease;
  -o-animation: animateOutDefault 0.8s ease;
  animation: animateOutDefault 0.8s ease;
}
@-webkit-keyframes animateOutDefault {
  from {
    top: 0;
  }
  to {
    top: 100%;
  }
}
@-moz-keyframes animateOutDefault {
  from {
    top: 0;
  }
  to {
    top: 100%;
  }
}
@keyframes animateOutDefault {
  from {
    top: 0;
  }
  to {
    top: 100%;
  }
}
/*define animation to animate in sub pages (signup and about)*/
.animateToTop {
  -webkit-animation: animateToTop 0.8s ease;
  -moz-animation: animateToTop 0.8s ease;
  -o-animation: animateToTop 0.8s ease;
  animation: animateToTop 0.8s ease;
}
@-webkit-keyframes animateToTop {
  from {
    top: 0;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  to {
    top: -100%;
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@-moz-keyframes animateToTop {
  from {
    top: 0;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  to {
    top: -100%;
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@keyframes animateToTop {
  from {
    top: 0;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  to {
    top: -100%;
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
/*define animation to animate in sub pages (signup and about)*/
.animateToBottom {
  -webkit-animation: animateToBottom 0.8s ease;
  -moz-animation: animateToBottom 0.8s ease;
  -o-animation: animateToBottom 0.8s ease;
  animation: animateToBottom 0.8s ease;
}
@-webkit-keyframes animateToBottom {
  from {
    top: 0;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  to {
    top: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@-moz-keyframes animateToBottom {
  from {
    top: 0;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  to {
    top: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@keyframes animateToBottom {
  from {
    top: 0;
    opacity: 1;
    filter: alpha(opacity=100);
  }
  to {
    top: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
/*define animation to animate in sub pages (signup and about)*/
.animateFromTop {
  -webkit-animation: animateFromTop 0.8s ease;
  -moz-animation: animateFromTop 0.8s ease;
  -o-animation: animateFromTop 0.8s ease;
  animation: animateFromTop 0.8s ease;
}
@-webkit-keyframes animateFromTop {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}
@-moz-keyframes animateFromTop {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}
@keyframes animateFromTop {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}
/*define animation to animate in sub pages (signup and about)*/
.animateFromBottom {
  -webkit-animation: animateFromBottom 0.8s ease;
  -moz-animation: animateFromBottom 0.8s ease;
  -o-animation: animateFromBottom 0.8s ease;
  animation: animateFromBottom 0.8s ease;
}
@-webkit-keyframes animateFromBottom {
  from {
    top: 100%;
  }
  to {
    top: 0;
  }
}
@-moz-keyframes animateFromBottom {
  from {
    top: 100%;
  }
  to {
    top: 0;
  }
}
@keyframes animateFromBottom {
  from {
    top: 100%;
  }
  to {
    top: 0;
  }
}
/* mobile animations */
@media screen and (max-width: 767px) {
  .animateIn {
    -webkit-animation: animateInDefault 0.8s ease;
    -moz-animation: animateInDefault 0.8s ease;
    -o-animation: animateInDefault 0.8s ease;
    animation: animateInDefault 0.8s ease;
  }
  @-webkit-keyframes animateInDefault {
    from {
      left: 100%;
    }
    to {
      left: 0;
    }
  }
  @-moz-keyframes animateInDefault {
    from {
      left: 100%;
    }
    to {
      left: 0;
    }
  }
  @keyframes animateInDefault {
    from {
      left: 100%;
    }
    to {
      left: 0;
    }
  }
  .animateOut {
    -webkit-animation: animateOutDefault 0.8s ease;
    -moz-animation: animateOutDefault 0.8s ease;
    -o-animation: animateOutDefault 0.8s ease;
    animation: animateOutDefault 0.8s ease;
  }
  @-webkit-keyframes animateOutDefault {
    from {
      left: 0;
    }
    to {
      left: 100%;
    }
  }
  @-moz-keyframes animateOutDefault {
    from {
      left: 0;
    }
    to {
      left: 100%;
    }
  }
  @keyframes animateOutDefault {
    from {
      left: 0;
    }
    to {
      left: 100%;
    }
  }
}
/* End of mobile animations */
/* end of animations used in css */
/* Start of forms styling */
/* general form styling black theme*/
textarea,
input,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: inherit;
  padding: 15px 20px 10px 20px;
  display: block;
  width: 100%;
  border: none;
  background: none;
  color: #ffffff;
  font-size: 16px;
  font-size: 1.6rem;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-appearance: none;
  border-radius: 0;
  background-color: #1d1d1d;
  text-align: center;
}
textarea:focus,
input:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus {
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */
  outline: none;
}
textarea.error,
input.error,
input[type="text"].error,
input[type="password"].error,
input[type="datetime"].error,
input[type="datetime-local"].error,
input[type="date"].error,
input[type="month"].error,
input[type="time"].error,
input[type="week"].error,
input[type="number"].error,
input[type="email"].error,
input[type="url"].error,
input[type="search"].error,
input[type="tel"].error,
input[type="color"].error {
  border-color: #e65c4a;
}
textarea.success,
input.success,
input[type="text"].success,
input[type="password"].success,
input[type="datetime"].success,
input[type="datetime-local"].success,
input[type="date"].success,
input[type="month"].success,
input[type="time"].success,
input[type="week"].success,
input[type="number"].success,
input[type="email"].success,
input[type="url"].success,
input[type="search"].success,
input[type="tel"].success,
input[type="color"].success {
  border-color: #62ba69;
}
/* general form styling white theme */
.white textarea,
.white input,
.white input[type="text"],
.white input[type="password"],
.white input[type="datetime"],
.white input[type="datetime-local"],
.white input[type="date"],
.white input[type="month"],
.white input[type="time"],
.white input[type="week"],
.white input[type="number"],
.white input[type="email"],
.white input[type="url"],
.white input[type="search"],
.white input[type="tel"],
.white input[type="color"] {
  color: #ffffff;
}
.white textarea:-moz-placeholder,
.white input:-moz-placeholder,
.white input[type="text"]:-moz-placeholder,
.white input[type="password"]:-moz-placeholder,
.white input[type="datetime"]:-moz-placeholder,
.white input[type="datetime-local"]:-moz-placeholder,
.white input[type="date"]:-moz-placeholder,
.white input[type="month"]:-moz-placeholder,
.white input[type="time"]:-moz-placeholder,
.white input[type="week"]:-moz-placeholder,
.white input[type="number"]:-moz-placeholder,
.white input[type="email"]:-moz-placeholder,
.white input[type="url"]:-moz-placeholder,
.white input[type="search"]:-moz-placeholder,
.white input[type="tel"]:-moz-placeholder,
.white input[type="color"]:-moz-placeholder {
  color: #ffffff;
}
.white textarea::-moz-placeholder,
.white input::-moz-placeholder,
.white input[type="text"]::-moz-placeholder,
.white input[type="password"]::-moz-placeholder,
.white input[type="datetime"]::-moz-placeholder,
.white input[type="datetime-local"]::-moz-placeholder,
.white input[type="date"]::-moz-placeholder,
.white input[type="month"]::-moz-placeholder,
.white input[type="time"]::-moz-placeholder,
.white input[type="week"]::-moz-placeholder,
.white input[type="number"]::-moz-placeholder,
.white input[type="email"]::-moz-placeholder,
.white input[type="url"]::-moz-placeholder,
.white input[type="search"]::-moz-placeholder,
.white input[type="tel"]::-moz-placeholder,
.white input[type="color"]::-moz-placeholder {
  color: #ffffff;
  opacity: 1;
}
.white textarea:-ms-input-placeholder,
.white input:-ms-input-placeholder,
.white input[type="text"]:-ms-input-placeholder,
.white input[type="password"]:-ms-input-placeholder,
.white input[type="datetime"]:-ms-input-placeholder,
.white input[type="datetime-local"]:-ms-input-placeholder,
.white input[type="date"]:-ms-input-placeholder,
.white input[type="month"]:-ms-input-placeholder,
.white input[type="time"]:-ms-input-placeholder,
.white input[type="week"]:-ms-input-placeholder,
.white input[type="number"]:-ms-input-placeholder,
.white input[type="email"]:-ms-input-placeholder,
.white input[type="url"]:-ms-input-placeholder,
.white input[type="search"]:-ms-input-placeholder,
.white input[type="tel"]:-ms-input-placeholder,
.white input[type="color"]:-ms-input-placeholder {
  color: #ffffff;
}
.white textarea::-webkit-input-placeholder,
.white input::-webkit-input-placeholder,
.white input[type="text"]::-webkit-input-placeholder,
.white input[type="password"]::-webkit-input-placeholder,
.white input[type="datetime"]::-webkit-input-placeholder,
.white input[type="datetime-local"]::-webkit-input-placeholder,
.white input[type="date"]::-webkit-input-placeholder,
.white input[type="month"]::-webkit-input-placeholder,
.white input[type="time"]::-webkit-input-placeholder,
.white input[type="week"]::-webkit-input-placeholder,
.white input[type="number"]::-webkit-input-placeholder,
.white input[type="email"]::-webkit-input-placeholder,
.white input[type="url"]::-webkit-input-placeholder,
.white input[type="search"]::-webkit-input-placeholder,
.white input[type="tel"]::-webkit-input-placeholder,
.white input[type="color"]::-webkit-input-placeholder {
  color: #ffffff;
}
/* reset styling for buttons */
button {
  -webkit-appearance: none;
  background: none;
  outline: 0;
  border: 0;
  color: #ffffff;
}
.white button {
  color: #000000;
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #666666;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #666666;
  opacity: 1;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #666666;
  opacity: 1;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #666666;
}
.white ::-webkit-input-placeholder {
  /* WebKit browsers */
  color: rgba(0, 0, 0, 0.2);
}
.white :-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: rgba(0, 0, 0, 0.2);
  opacity: 1;
}
.white ::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: rgba(0, 0, 0, 0.2);
  opacity: 1;
}
.white :-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: rgba(0, 0, 0, 0.2);
}
/* input groups with labels */
.input-group {
  display: block;
  height: auto;
  margin-bottom: 10px;
  background-color: #1d1d1d;
}
.input-group label,
.input-group input,
.input-group input[type="email"] {
  display: inline-block;
  border-bottom: none;
  padding: 15px 20px 10px 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: left;
  vertical-align: bottom;
}
.input-group label {
  width: 15%;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.5;
}
.input-group label.label-textarea {
  width: 100%;
  margin-top: 5px;
}
.input-group input {
  width: 84%;
}
.input-group textarea {
  padding-top: 0;
  display: block;
  border: none;
  text-align: left;
  height: auto;
}
.white .input-group label {
  color: #808080;
}
form {
  overflow: hidden;
}
/* End of forms styling */
@media screen and (max-width: 767px) {
  .input-group {
    background-color: transparent;
  }
  .input-group label,
  .input-group input,
  .input-group input[type="email"] {
    display: block;
    border-bottom: none;
    padding: 15px 20px 15px 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
    vertical-align: bottom;
    text-align: center;
  }
  .input-group label {
    width: 100%;
    color: rgba(255, 255, 255, 0.6);
  }
  .input-group input {
    width: 100%;
  }
  .input-group textarea {
    padding-top: 15px;
    display: block;
    border-bottom: transparent;
    text-align: center;
    height: auto;
  }
}
/**
 * Featherlight – ultra slim jQuery lightbox
 * Version 1.0.3 - http://noelboss.github.io/featherlight/
 *
 * Copyright 2014, Noël Raoul Bossart (http://www.noelboss.com)
 * MIT Licensed.
**/
@media all {
  .featherlight {
    display: none;
    /* dimensions: spanning the background from edge to edge */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    /* position: centering content */
    text-align: center;
    /* insures that the ::before pseudo element doesn't force wrap with fixed width content; */
    white-space: nowrap;
    /* styling */
    cursor: pointer;
    background: #333;
    /* IE8 "hack" for nested featherlights */
    background: rgba(0, 0, 0, 0);
  }
  /* support for nested featherlights. Does not work in IE8 (use JS to fix) */
  .featherlight:last-of-type {
    background: rgba(0, 0, 0, 0.8);
  }
  .featherlight:before {
    /* position: trick to center content vertically */
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
  }
  .featherlight .featherlight-content {
    /* make content container for positioned elements (close button) */
    position: relative;
    /* position: centering vertical and horizontal */
    text-align: left;
    vertical-align: middle;
    display: inline-block;
    /* dimensions: cut off images */
    overflow: auto;
    padding: 25px 25px 0;
    border-bottom: 25px solid transparent;
    /* dimensions: handling small or empty content */
    min-width: 30%;
    /* dimensions: handling large content */
    margin-left: 5%;
    margin-right: 5%;
    max-height: 95%;
    /* styling */
    background: #fff;
    cursor: auto;
    /* reset white-space wrapping */
    white-space: normal;
  }
  /* contains the content */
  .featherlight .featherlight-inner {
    /* make sure its visible */
    display: block;
  }
  .featherlight .featherlight-close-icon {
    /* position: centering vertical and horizontal */
    position: absolute;
    z-index: 9999;
    top: 0;
    right: 0;
    /* dimensions: 25px x 25px */
    line-height: 25px;
    width: 25px;
    /* styling */
    cursor: pointer;
    text-align: center;
    font: Arial, sans-serif;
    background: #fff;
    /* Set the background in case it overlaps the content */
    background: rgba(255, 255, 255, 0.3);
    color: #000;
  }
  .featherlight .featherlight-image {
    /* styling */
    width: 100%;
  }
  .featherlight-iframe .featherlight-content {
    /* removed the border for image croping since iframe is edge to edge */
    border-bottom: 0;
    padding: 0;
  }
  .featherlight iframe {
    /* styling */
    border: none;
  }
}
/* handling phones and small screens */
@media only screen and (max-width: 1024px) {
  .featherlight .featherlight-content {
    /* dimensions: maximize lightbox with for small screens */
    margin-left: 10px;
    margin-right: 10px;
    max-height: 98%;
    padding: 10px 10px 0;
    border-bottom: 10px solid transparent;
  }
}
/* End of featherlight styling */
@font-face {
  font-family: 'fontawesome';
  src: url('../fonts/fontawesome/fontawesome-webfont.eot');
  src: url('../fonts/fontawesome/fontawesome-webfont.eot?#iefix') format("embedded-opentype"), url('../fonts/fontawesome/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome/fontawesome-webfont.svg#fontawesome') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Social icons */
/* interface icons */
@font-face {
  font-family: 'et-line';
  src: url('../fonts/et-line/et-line.eot');
  src: url('../fonts/et-line/et-line.eot?#iefix') format("embedded-opentype"), url('../fonts/et-line/et-line.woff') format('woff'), url('../fonts/et-line/et-line.ttf') format('truetype'), url('../fonts/et-line/et-line.svg#et-line') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* The font for the counter */
/** The html **/
/* html styling and reset */
html {
  background: #000000;
  font: normal 62.5%/1em 'Montserrat', sans-serif;
  height: 100%;
  -webkit-font-smoothing: antialiased;
}
/* Body general markup, fonts and reset */
body {
  color: #ffffff;
  font-size: 13px;
  font-size: 1.3rem;
  margin: 0;
  padding: 0;
  min-height: 100%;
  line-height: 1em;
  text-align: center;
  -moz-osx-font-smoothing: grayscale;
}
/* Start shared.less, contains elements that are shared over all the pages. Header, footer, slider, etc. */
/* youtube background styling fixes */
#tubular-container {
  opacity: 0;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#tubular-container.fade-in {
  opacity: 1;
}
/* Positioning of the header and the footer */
main {
  position: absolute;
  width: 100%;
  -webkit-transition: translate3d(-320px, 0, 0);
  transition: translate3d(-320px, 0, 0);
  -webkit-transition: -moz-transform 0.3s;
  transition: -moz-transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
}
main.menu-open {
  -webkit-transform: translateX(250px);
  -ms-transform: translateX(250px);
  transform: translateX(250px);
}
/* The splash screen / preloader markup */
div.splash {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  overflow: hidden;
  background-color: #000000;
  /* styling of the logo */
  /*s tyling for the preloader */
}
div.splash figure {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
div.splash figure.logo {
  width: 65px;
  height: 65px;
  background-image: url(../img/logo-white.svg);
  background-size: 100%;
}
div.splash figure.loader {
  width: 50px;
  height: 50px;
  background-image: url("../img/preloader/puff.svg");
  /* Just add the classes to change the preloaders */
}
div.splash figure.loader.audio {
  background-image: url("../img/preloader/audio.svg");
}
div.splash figure.loader.ball-triangle {
  background-image: url("../img/preloader/ball-triangle.svg");
}
div.splash figure.loader.bars {
  background-image: url("../img/preloader/bars.svg");
}
div.splash figure.loader.circles {
  background-image: url("../img/preloader/circles.svg");
}
div.splash figure.loader.grid {
  background-image: url("../img/preloader/grid.svg");
}
div.splash figure.loader.hearts {
  background-image: url("../img/preloader/hearts.svg");
}
div.splash figure.loader.oval {
  background-image: url("../img/preloader/oval.svg");
}
div.splash figure.loader.rings {
  background-image: url("../img/preloader/rings.svg");
}
div.splash figure.loader.spinning-circles {
  background-image: url("../img/preloader/spinning-circles.svg");
}
div.splash figure.loader.tail-spin {
  background-image: url("../img/preloader/tail-spin.svg");
}
div.splash figure.loader.three-dots {
  background-image: url("../img/preloader/three-dots.svg");
}
/* General markup and sizes for the main element */
main {
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  /* The styling for the header */
  /* Content block information styling */
  /* Footer styling, and copyright */
}
main header {
  z-index: 1;
  height: 25%;
  position: relative;
  -webkit-perspective: 800;
  -moz-perspective: 800;
  perspective: 800;
  /* Style the logo, use variables.less to update sizes */
}
main header h1.logo {
  display: inline-block;
  width: 270px;
  background: url(../img/logo-white.png);
  background: url(../img/logo-white.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  margin: 75px 0;
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
}
main header h1.logo a {
  display: block;
  width: 270px;
  height: 270px;
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
  position: relative;
}
main header h1.logo:hover {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
main .information {
  max-width: 650px;
  margin: auto;
}
main .information p {
  margin: 0;
}
main .information h1,
main .information h2,
main .information h3,
main .information h4,
main .information h5 {
  font-weight: bold;
  margin-bottom: 0;
}
main .information h1:first-child,
main .information h2:first-child,
main .information h3:first-child,
main .information h4:first-child,
main .information h5:first-child {
  margin-top: 20px;
}
main footer {
  padding: 25px 0;
  /* Social links styling */
}
main footer p.copyright {
  margin: 0;
  text-transform: uppercase;
  font-size: 10px;
  font-size: 1rem;
  letter-spacing: .05em;
}
/* Styling for the background holder. This contains video's a slideshow or just an image */
div.background {
  z-index: 0;
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  -webkit-transition: translate3d(-320px, 0, 0);
  transition: translate3d(-320px, 0, 0);
  -webkit-transition: -moz-transform 0.3s;
  transition: -moz-transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
  /* Styling of the slides */
  /* The overlay over the images / video */
}
div.background.menu-open {
  -webkit-transform: translateX(250px);
  -ms-transform: translateX(250px);
  transform: translateX(250px);
}
div.background .slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
}
div.background:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background-color: rgba(0, 0, 0, 0.6);
}
/* Main white theme markup, change variables to fit your needs */
.white {
  color: #000000;
}
.white main header h1.logo {
  background: url(../img/logo-black.png);
  background: url(../img/logo-black.svg);
  background-size: cover;
}
.white div.background:after {
  background-color: rgba(255, 255, 255, 0.6);
}
.white div.splash {
  background-color: #ffffff;
}
.white div.splash figure.logo {
  width: 65px;
  height: 65px;
  background-image: url(../img/logo-black.svg);
}
.white div.splash figure.loader {
  width: 50px;
  height: 50px;
  background-image: url("../img/preloader/black/puff.svg");
}
.white div.splash figure.loader.audio {
  background-image: url("../img/preloader/black/audio.svg");
}
.white div.splash figure.loader.ball-triangle {
  background-image: url("../img/preloader/black/ball-triangle.svg");
}
.white div.splash figure.loader.bars {
  background-image: url("../img/preloader/black/bars.svg");
}
.white div.splash figure.loader.circles {
  background-image: url("../img/preloader/black/circles.svg");
}
.white div.splash figure.loader.grid {
  background-image: url("../img/preloader/black/grid.svg");
}
.white div.splash figure.loader.hearts {
  background-image: url("../img/preloader/black/hearts.svg");
}
.white div.splash figure.loader.oval {
  background-image: url("../img/preloader/black/oval.svg");
}
.white div.splash figure.loader.rings {
  background-image: url("../img/preloader/black/rings.svg");
}
.white div.splash figure.loader.spinning-circles {
  background-image: url("../img/preloader/black/spinning-circles.svg");
}
.white div.splash figure.loader.tail-spin {
  background-image: url("../img/preloader/black/tail-spin.svg");
}
.white div.splash figure.loader.three-dots {
  background-image: url("../img/preloader/black/three-dots.svg");
}
/* End of white markup */
/* Shared elements: Mobile media queries */
@media screen and (max-width: 768px) {
  main {
    height: auto;
    display: block;
  }
  main header {
    height: 120px;
  }
  main header h1.logo {
    margin: 40px 0;
    width: 170px;
  }
  main header h1.logo a {
    width: 170px;
    height: 170px;
  }
  main section.content {
    max-width: 80%;
    margin: 0 auto;
  }
  main footer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    bottom: 0;
    margin: 20px 0;
    padding: 10px;
  }
  div.background {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  div.background div.slide {
    height: 100vh;
    width: 100vw;
    background-position: center center;
    background-repeat: no-repeat;
  }
}
/* Homepage ipad portrait */
@media screen and (min-width: 768px) and (orientation: portrait) {
  main header {
    height: 25%;
  }
  main header h1.logo {
    margin: 40px 0;
    width: 90px;
  }
  main header h1.logo a {
    width: 90px;
    height: 90px;
  }
}
/* Shared elements: Mobile media queries */
@media screen and (max-width: 1024px) and (orientation: landscape) {
  main footer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    bottom: 0;
    margin: 20px 0;
    padding: 10px;
  }
  div.background {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  div.background div.slide {
    height: 100vh;
    width: 100vw;
    background-position: center center;
    background-repeat: no-repeat;
  }
}
/* End of shared elements */
/* Styling of the home/counter page */
/*general styling for the home page (containing the slider) */
main.home {
  /*the subscribe section containing the button linking to about.html */
  /* animation specific to animating in index.html */
  /*animation specific to animating out index.html*/
}
main.home .content {
  min-height: calc(100% - 350px);
  position: relative;
}
main.home .content article.counter {
  /*styling of the counter itself*/
  /*progress bar indicating how long from now till the event*/
}
main.home .content article.counter #countdown {
  min-height: 180px;
  /* Typography of the counter */
}
main.home .content article.counter #countdown h3 {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 85px;
  font-size: 8.5rem;
  line-height: 1;
  margin: 5% 30px 0 30px;
  font-weight: 100;
  min-width: 150px;
  letter-spacing: 0;
}
main.home .content article.counter #countdown h3 span {
  font-size: 14px;
  font-size: 1.4rem;
  display: block;
  font-style: italic;
  font-family: Georgia, serif;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 10px 0 0 0;
}
main.home .content article.counter.slim #countdown h3 {
  font-family: 'Poiret One', cursive;
}
main.home .content article.counter .progress-bar {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 20px 0;
}
main.home .content article.counter .progress-bar #meter {
  display: block;
  height: 100%;
  width: 0;
  background-color: #ffffff;
  -webkit-transition: all 1s;
  transition: all 1s;
}
main.home #dom-slideshow {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 40%;
}
main.home #dom-slideshow article {
  position: absolute;
  width: 100%;
  display: none;
}
main.home section h1,
main.home article h1,
main.home section h2,
main.home article h2,
main.home section h3,
main.home article h3,
main.home section h4,
main.home article h4,
main.home section h5,
main.home article h5,
main.home section p,
main.home article p {
  text-transform: uppercase;
  line-height: 1.1;
  margin: 30px 0 20px 0;
}
main.home section p,
main.home article p {
  font-family: Georgia, serif;
  text-transform: none;
  font-style: italic;
  font-size: 21px;
  font-size: 2.1rem;
  display: inline-block;
  margin: 0 10px 0 0;
}
main.home section.message,
main.home article.message {
  margin-top: -40px;
}
main.home section.message h1,
main.home article.message h1,
main.home section.message h2,
main.home article.message h2,
main.home section.message h3,
main.home article.message h3,
main.home section.message h4,
main.home article.message h4,
main.home section.message h5,
main.home article.message h5,
main.home section.message p,
main.home article.message p {
  margin-top: 0;
}
main.home.animateIn {
  -webkit-animation: animateInDefaultHome 0.8s ease;
  -moz-animation: animateInDefaultHome 0.8s ease;
  -o-animation: animateInDefaultHome 0.8s ease;
  animation: animateInDefaultHome 0.8s ease;
}
@-webkit-keyframes animateInDefaultHome {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}
@-moz-keyframes animateInDefaultHome {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}
@keyframes animateInDefaultHome {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}
main.home.animateOut {
  -webkit-animation: animateOutDefaultHome 0.8s ease;
  -moz-animation: animateOutDefaultHome 0.8s ease;
  -o-animation: animateOutDefaultHome 0.8s ease;
  animation: animateOutDefaultHome 0.8s ease;
}
@-webkit-keyframes animateOutDefaultHome {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}
@-moz-keyframes animateOutDefaultHome {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}
@keyframes animateOutDefaultHome {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}
/* white theme */
.white main.home article.counter #countdown h3 span {
  color: rgba(0, 0, 0, 0.4);
}
.white main.home article.counter .progress-bar {
  background-color: rgba(0, 0, 0, 0.2);
}
.white main.home article.counter .progress-bar #meter {
  background-color: #000000;
}
.white main.home section.subscribe h1 a,
.white main.home section.subscribe h2 a,
.white main.home section.subscribe h3 a,
.white main.home section.subscribe h4 a,
.white main.home section.subscribe h5 a,
.white main.home section.subscribe p a {
  border-bottom: 1px solid #000000;
  color: #000000;
}
.white main.home section.subscribe h1 a:hover,
.white main.home section.subscribe h2 a:hover,
.white main.home section.subscribe h3 a:hover,
.white main.home section.subscribe h4 a:hover,
.white main.home section.subscribe h5 a:hover,
.white main.home section.subscribe p a:hover {
  background-color: #000000;
  color: #ffffff;
  border-color: transparent;
}
/* End of home white theme */
@media screen and (max-width: 767px) {
  main.home {
    height: 100%;
    /** animate in **/
    /** animate out **/
  }
  main.home section.content {
    max-width: 100%;
    min-height: calc(100% - 180px);
  }
  main.home section.content article.counter #countdown {
    margin-top: 10px;
    min-height: 210px;
  }
  main.home section.content article.counter #countdown h3 {
    font-size: 40px;
    font-size: 4rem;
    display: inline-block;
    margin: 0;
    min-width: 125px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
  }
  main.home section.content article.counter #countdown h3:nth-child(even) {
    padding-left: 0;
  }
  main.home section.content article.counter #countdown h3:nth-child(odd) {
    padding-right: 0;
  }
  main.home section.content article.counter div.progress-bar {
    margin: 10px 0;
  }
  main.home section.content section.subscribe {
    max-width: 280px;
    margin: 0 auto;
  }
  main.home section.content section.subscribe h3 {
    margin: 30px 0;
  }
  main.home section.content section.subscribe a {
    margin-top: 20px;
  }
  main.home section.content .message {
    margin-top: 0;
  }
  main.home section.content .message a {
    margin: 15px 0;
  }
  main.home.animateIn {
    -webkit-animation: animateInDefaultHome 0.8s ease;
    -moz-animation: animateInDefaultHome 0.8s ease;
    -o-animation: animateInDefaultHome 0.8s ease;
    animation: animateInDefaultHome 0.8s ease;
  }
  @-webkit-keyframes animateInDefaultHome {
    from {
      left: -100%;
    }
    to {
      left: 0;
    }
  }
  @-moz-keyframes animateInDefaultHome {
    from {
      left: -100%;
    }
    to {
      left: 0;
    }
  }
  @keyframes animateInDefaultHome {
    from {
      left: -100%;
    }
    to {
      left: 0;
    }
  }
  main.home.animateOut {
    -webkit-animation: animateOutDefaultHome 0.8s ease;
    -moz-animation: animateOutDefaultHome 0.8s ease;
    -o-animation: animateOutDefaultHome 0.8s ease;
    animation: animateOutDefaultHome 0.8s ease;
  }
  @-webkit-keyframes animateOutDefaultHome {
    from {
      left: 0;
    }
    to {
      left: -100%;
    }
  }
  @-moz-keyframes animateOutDefaultHome {
    from {
      left: 0;
    }
    to {
      left: -100%;
    }
  }
  @keyframes animateOutDefaultHome {
    from {
      left: 0;
    }
    to {
      left: -100%;
    }
  }
}
/* Homepage: Mobile landscape media queries */
@media screen and (max-width: 1024px) and (orientation: landscape) {
  main.home header h1.logo {
    margin: 25px 0;
  }
  main.home section.content {
    min-height: calc(100% - 380px);
  }
  main.home section.content section.message a,
  main.home section.content article.message a {
    margin: 0;
  }
  main.home section.content article.counter #countdown {
    min-height: 100px;
  }
}
/* Homepage ipad portrait */
@media screen and (min-width: 768px) and (orientation: portrait) {
  main.home {
    height: 100%;
  }
  main.home section.content {
    max-width: 100%;
    min-height: calc(100% - 400px);
  }
  main.home section.content article.counter #countdown {
    min-height: 100px;
  }
  main.home section.content article.counter #countdown h3 {
    margin: 0;
    font-size: 80px;
    font-size: 8rem;
  }
}
/* End of styling home/counter page */
/* Start of sign-up page styling */
/* general sign up page styling */
main.sign-up {
  background-color: rgba(0, 0, 0, 0.6);
  min-height: 100%;
  /* form style */
}
main.sign-up section.content {
  min-height: calc(100% - 200px);
}
main.sign-up form.subscribe {
  max-width: 325px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  /* The styling for the error message */
}
main.sign-up form.subscribe button {
  margin: 15px 0 0 0;
}
main.sign-up form.subscribe span {
  position: relative;
  margin: 3px 0 0 0;
  display: block;
  padding: 5px;
  font-size: 12px;
  font-size: 1.2rem;
  vertical-align: middle;
}
main.sign-up form.subscribe span.message.error {
  background-color: #e65c4a;
}
main.sign-up form.subscribe span.message.success {
  background-color: #62ba69;
}
/* white theme styling */
.white main.sign-up {
  background-color: rgba(255, 255, 255, 0.7);
  color: #000000;
}
/* sign-up styling for smaller resolutions */
@media screen and (max-width: 767px) {
  main.sign-up section.information form button {
    margin: 35px 0;
  }
}
/* End of sign-up page styling */
/* Start of styling about page */
/*general styling for the about page */
main.about {
  background-color: rgba(0, 0, 0, 0.6);
  min-height: 100%;
  height: auto;
}
main.about section.information .gallery li:before {
  content: "";
  margin: 0;
}
main.about section.information ul {
  display: inline-block;
  margin: 20px 0;
  list-style: none;
}
main.about section.information ul li:before {
  font-family: "fontawesome";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  speak: none;
  line-height: 1;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  content: "\f00c";
  margin-right: 15px;
}
main.about footer {
  padding: 30px 0;
  position: relative;
  bottom: 0;
}
/* About white theme */
.white main.about {
  background-color: rgba(255, 255, 255, 0.7);
  color: #000000;
}
/* Homepage: Mobile Portrait media queries */
@media screen and (max-width: 767px) {
  main.about section.icon-list article {
    width: 100%;
  }
}
/* End of styling about page */
/* Start gallery styling */
main.page {
  background-color: rgba(0, 0, 0, 0.7);
  top: 0;
  min-height: 100%;
  height: auto;
}
main.page section.content section.information {
  max-width: 100%;
}
main.page section.content section.information h1,
main.page section.content section.information h2,
main.page section.content section.information h3,
main.page section.content section.information h4,
main.page section.content section.information h5,
main.page section.content section.information p {
  max-width: 650px;
  margin: auto;
}
main.page section.content section.information section.gallery {
  max-width: 750px;
  margin: 0 auto;
}
main.page section.content section.information section.gallery i {
  color: #009cff;
}
.white main.page {
  background-color: rgba(255, 255, 255, 0.7);
}
.white main.page section.content section.information .copyright {
  color: #000000;
}
/* end gallery styling */
/* start of contact styling */
main.contact {
  background-color: rgba(0, 0, 0, 0.6);
  top: 0;
  min-height: 100%;
  height: auto;
}
main.contact section.content section.information form {
  max-width: 500px;
  margin: 20px auto 30px auto;
  overflow: hidden;
}
main.contact section.content section.information form i:before {
  font-size: 30px;
  font-size: 3rem;
}
main.contact section.content section.information button {
  float: right;
  margin: 15px 0 0 0;
}
main.contact section.content section.information .notice {
  text-align: left;
  width: 60%;
  float: left;
}
main.contact section.content section.information .notice p,
main.contact section.content section.information .notice strong {
  font-size: 14px;
  font-size: 1.4rem;
  text-transform: uppercase;
}
main.contact section.content section.information .notice p {
  color: rgba(255, 255, 255, 0.3);
  margin: 15px 0 0 0;
  font-family: Georgia, serif;
  text-transform: none;
  font-style: italic;
}
main.contact section.content section.information .notice strong {
  color: #ffffff;
  font-weight: 100;
}
.white main.contact {
  background-color: rgba(255, 255, 255, 0.7);
}
.white main.contact section.content section.information .notice p {
  color: #666666;
}
.white main.contact section.content section.information .notice strong {
  color: #000000;
}
@media screen and (max-width: 767px) {
  main.contact section.content section.information button {
    float: none;
    margin: 15px 0 0 0;
  }
  main.contact section.content section.information .message {
    text-align: center;
    width: 100%;
    float: none;
    margin-bottom: 20px;
  }
  main.contact section.content section.information .notice {
    width: 100%;
    text-align: center;
  }
}
/* end of contact styling */