/*-----------------------------------------------------------------
[Legal Notice]

Copyright (c) HighHay/Mivfx
Before using this template, you should agree with themeforest licenses terms.
http://themeforest.net/licenses
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Table of contents]

0. Initialization
    0.1. Reset HTML Tags
    0.2. Text Position / .text-*
    0.3. Block Disposition / .hide, .row

1. Body
	1.1. Body background / body
	1.2. Background Mask / .main-bg-mask
	1.3. Video background / .video-container

2. Main Content / .main-content
	2.1. All elements at left / .left
        2.1.1. Social Networks and external links / .header-top
        2.1.2. left description block / .left-desc
        2.1.3. Coming Soon and title text
            2.1.3.1 Coming Soon / h1.soon
            2.1.3.2 Title / h2.title
        2.1.4. Moto or Descritpion / p.soon-desc
        2.1.5. Email Subscription Button / .subscribe
            2.1.5.1. Subscribe button / .subscribe-btn
            2.1.5.2. Mailing list Form / .form	
        2.1.6. Informations Dialog Buttons / .dialog-btn

	2.2. All elements at right / .right
        2.2.1. Logo at top right / .logo-top
        2.2.2. Clock / .clock-layout

3. Dialogs / .dialog-container
    3.1. Dialog frame / .dialog-frame
    3.2. Dialog content / .d-content
    3.3 Comments dialog / .d-comment
    3.4. Paper styled Dialog (About Us Dialog, Contact Dialog) / .d-paper
4. Footer / .footer
    4.1. Footer Notice / .notice

8. Screen Responsiveness
    8.1. Handset Screen Less than 768 px width
    8.2. Handset Screen Less 480 px width
    8.3. Handset Screen Less than 360 px width    

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

/*-----------------------------------------------------------------
[Color codes]
Default Colors:
    Blue : #64B7E2
    White : #F8F9FA, #FFF
    Black : #2D2E30
    Transluscent Black Background Mask : rgba(30, 29, 37, 0.8)

Dialog Windows :
    White : #FFF
    Black : #2D2E30
    Dark Blue Icon: #425865
    Dark Blue Window: rgba(66, 88, 101, 0.35)

Clock :
    White : #F8F9FA, #FFF
-------------------------------------------------------------------*/

/* 0. Initialization */
/* 0.1. Reset HTML Tags */
html,
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
address,
img,
ul,
li,
form,
label,
article,
aside,
canvas,
details,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  color: #f8f9fa;
  font-size: 100%;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
}
html {
  height: 100%;
  font-size: 62.5%; /* 10px with default settings */
}

ul,
li {
  list-style: none;
  padding: 0;
}

section {
  z-index: 100;
}

h5 {
  font-size: 3rem;
  color: #f4f4f4;
}
a,
a:hover,
a:visited {
  color: #fff;
  text-decoration: none;
}
a:hover {
  color: #ccc;
}
input,
button {
  font-family: "bebasneue_regular";
  padding: 0.5rem;
  font-size: 2rem;
}
textarea {
  font-family: "OpenSans";
  padding: 0.5rem;
  font-size: 1.5rem;
}

/*0.2. Text Position*/
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}
.text-bold {
  font-weight: bold;
}

/* 0.3. Block disposition .hide .row */
.row:after {
  content: " ";
  display: table;
}
.row:before {
  content: " ";
  display: table;
}
.col-50 {
  position: relative;
  width: 50%;
}
.column {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.column.left {
  float: left;
}
.column.right {
  float: right;
}
.hide {
  visibility: hidden;
}
.flex-block {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.flex-vcenter {
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.flex-hcenter {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
/* 1. Body */
/* 1.1. Body background */
body {
  -webkit-font-smoothing: antialiased;
  margin: 0;
  height: 100%;
  width: 100%;

  background: url("../img/picts/leaves.jpg");

  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  font-family: "OpenSans-Light";
}
/* 1.2. Background Mask */
.main-bg,
.main-bg-mask {
  content: " ";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
}
.main-bg-mask {
  background: rgba(0, 0, 0, 0.45);
  background-position: center;
  background-size: cover;
}

/* 1.3. Video background */
.video-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.video-container video {
  height: 724px;
  width: 1287px;
  margin-top: -42px;
  margin-left: 0px;
}
.video-container iframe {
  width: 100%;
  height: 100%;
}
/* 2. Main Content */
.main-content {
  content: " ";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}
/* 2.1. All elements at left */
.main-content .left {
  height: 100%;
}
/* 2.1.1. Social Networks and external links */
.header-top {
  top: 0;
  left: 0;
  margin-top: 5rem;
  margin-left: 10rem;
  position: absolute;

  -webkit-transition: 1s;
  -ms-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
  opacity: 1;

  -webkit-transition-delay: 2s;
  -moz-transition-delay: 2s;
  -ms-transition-delay: 2s;
  transition-delay: 2s;

  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  transform: none;
}
.header-top.start {
  opacity: 0;

  -webkit-transform: translateY(-3rem);
  -moz-transform: translateY(-3rem);
  -ms-transform: translateY(-3rem);
  transform: translateY(-3rem);
}
.header-top .follow-text {
  font-size: 1.5rem;
  font-family: "OpenSans-Light";
  margin: 0;
}
.header-top .s-block {
  height: 5rem;
  margin-top: 1rem;
}
.header-top .s-block li {
  display: block;
  float: left;
  margin-right: 1rem;
}
.header-top .s-block li a,
.header-top .s-block li i.fa {
  font-size: 2.5rem;
}

/* 2.1.2. left description block */

.left-desc {
  max-width: 35.1rem;
  /*    width: auto;*/
  margin-left: 10rem;
}

/* 2.1.3. Coming Soon and title text */
/* 2.1.3.1 Coming Soon*/
h1.soon {
  font-size: 4.5rem;
  margin-bottom: 0;
  margin-top: 0;
  font-family: "montserrat_bold", sans-serif;
  text-transform: uppercase;
  color: rgb(248, 249, 250);
  text-align: left;
  display: inline-block;
  position: relative;

  border-bottom: 2px solid;

  -webkit-transition: 1s;
  -ms-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
  opacity: 1;

  -webkit-transition-delay: 1.2s;
  -moz-transition-delay: 1.2s;
  -ms-transition-delay: 1.2s;
  transition-delay: 1.2s;

  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  transform: none;
}
h1.soon.start {
  opacity: 0;
  -webkit-transform: translateX(-3rem);
  -ms-transform: translateX(-3rem);
  -moz-transform: translateX(-3rem);
  transform: translateX(-3rem);
}
/* line below coming soon text*/

/* 2.1.3.2 Title*/
h2.title {
  font-size: 4.5rem;
  margin-bottom: 0;
  margin-top: 0;
  font-family: "montserrat_bold";
  text-transform: uppercase;
  color: rgb(248, 249, 250);
  text-align: left;
  display: block;
  position: relative;

  -webkit-transition: 1.2s;
  -ms-transition: 1.2s;
  -moz-transition: 1.2s;
  transition: 1.2s;
  opacity: 1;

  -webkit-transition-delay: 1.2s;
  -moz-transition-delay: 1.2s;
  -ms-transition-delay: 1.2s;
  transition-delay: 1.2s;

  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  transform: none;
}
h2.title.start {
  opacity: 0;
  -webkit-transform: translateX(3rem);
  -ms-transform: translateX(3rem);
  -moz-transform: translateX(3rem);
  transform: translateX(3rem);
}
/* 2.1.4. Moto or Descritpion */

p.soon-desc {
  font-size: 1.8rem;
  line-height: 2.5rem;
  max-width: 100%;
  letter-spacing: 0;
  font-family: "serif";
  font-style: italic;
  color: #f8f9fa;
  margin-bottom: 3rem;

  -webkit-transition: 1s;
  -ms-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
  opacity: 1;

  -webkit-transition-delay: 1.2s;
  -moz-transition-delay: 1.2s;
  -ms-transition-delay: 1.2s;
  transition-delay: 1.2s;

  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  transform: none;
}
p.soon-desc.start {
  opacity: 0;

  -webkit-transform: translateY(3rem);
  -moz-transform: translateY(3rem);
  -ms-transform: translateY(3rem);
  transform: translateY(3rem);
}
/* alternative color */
p.soon-desc .text-altcolor {
  color: #64b7e2;
}
/* Fontawasome */
p.soon-desc i.fa {
  color: #64b7e2;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
p.soon-desc i.fa:before {
  line-height: 0rem !important;
}
/* 2.1.5. Email Subscription Button */
.subscribe {
  -webkit-transition: 1s;
  -ms-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
  opacity: 1;

  -webkit-transition-delay: 2s;
  -moz-transition-delay: 2s;
  -ms-transition-delay: 2s;
  transition-delay: 2s;

  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  transform: none;
}
.subscribe.start {
  opacity: 0;
}
.hidden-response {
  display: none;
}
/* 2.1.5.1. Subscribe button */
.subscribe-btn {
  border: 0.2rem solid #f8f9fa;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1rem;
  margin-top: 0rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 4px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 4px 1px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 4px 1px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 4px 1px rgba(0, 0, 0, 0.1);

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  float: left;
  display: block;

  width: 23rem;
}

.subscribe-btn p {
  font-family: "montserrat_regular", sans-serif;
  text-transform: uppercase;

  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;

  font-size: 1.5rem;

  opacity: 2;
  text-align: center;
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
  padding-top: 2px;
  -moz-transform: translateY(0rem) rotateX(0deg);
  -ms-transform: translateY(0rem) rotateX(0deg);
  -webkit-transform: translateY(0rem) rotateX(0deg);
  transform: translateY(0rem) rotateX(0deg);

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
/*Button Animation*/
.subscribe-btn:hover p {
  position: relative;
  opacity: 0;
  -moz-transform: translateY(2rem) rotateX(-95deg);
  -ms-transform: translateY(2rem) rotateX(-95deg);
  -webkit-transform: translateY(2rem) rotateX(-95deg);
  transform: translateY(2rem) rotateX(-95deg);
}
.subscribe-btn.email-sent:hover p {
  -moz-transform: none;
  -ms-transform: none;
  -webkit-transform: none;
  transform: none;
  opacity: 1;
}

/* 2.1.5.2. Mailing list Form */
.subscribe .form {
  position: absolute;

  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  border: none;
  margin: 0;
  padding: 0;
  -moz-transition: ease-out 0.6s;
  -ms-transition: ease-out 0.6s;
  -webkit-transition: ease-out 0.6s;
  transition: ease-out 0.6s;

  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
  text-align: center;

  top: 0;
  margin-top: 0;
}
.subscribe .input-elements {
  border: none;
  position: absolute;
  display: inline-block;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  margin-top: 0;
}
.subscribe .form.magic,
.subscribe-btn.email-sent:hover .form.magic {
  top: 0rem;
  opacity: 0;
  /*
        -ms-transform: rotateX(90deg);
        -moz-transform: rotateX(90deg);
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg);
*/
}
.subscribe-btn.email-sent .form.magic {
  visibility: hidden;
}
.subscribe-btn:hover .form.magic {
  opacity: 1;
  top: 0rem;
  -ms-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);

  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}

.subscribe input.email-input,
.subscribe button.email-btn {
  outline: none;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.subscribe .email-input {
  background: transparent;
  font-family: "montserrat_regular", sans-serif;
  letter-spacing: 0.05em;
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
  color: #f8f9fa;
  margin: 0;
  margin-right: -0.2rem;

  border: none;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;

  width: 18rem;
}
.subscribe .email-btn {
  border: none;
  font-family: "montserrat_regular", sans-serif;
  letter-spacing: 0.05em;
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
  margin: 0;
  margin-right: -0.1rem;

  background: #fff;
  color: #2d2e30;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/* 2.1.6. Informations Dialog Buttons */

.dialog-btn {
  float: right;
  display: block;
  margin-top: -0.2rem;

  -webkit-transition: 1s;
  -ms-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
  opacity: 1;

  -webkit-transition-delay: 2s;
  -moz-transition-delay: 2s;
  -ms-transition-delay: 2s;
  transition-delay: 2s;

  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  transform: none;
}
.dialog-btn.start {
  opacity: 0;
  -webkit-transform: translateY(3rem);
  -moz-transform: translateY(3rem);
  -ms-transform: translateY(3rem);
  transform: translateY(3rem);
}
.dialog-btn .d-block {
}

.dialog-btn .d-block li {
  display: block;
  float: left;
  margin-right: 1rem;
}
.dialog-btn .d-block li a {
  margin: auto;
  text-align: center;
  width: 100%;
  position: relative;
  display: inline-block;
  color: #fff;
  transition: 0.6s;
}
.dialog-btn .d-block li a {
  color: #fff;
}
.dialog-btn .d-block li a,
.dialog-btn .d-block li i.fa {
  font-size: 2.5rem;
}
/* bottom model*/
.dialog-btn.pos-bottom {
  float: left;
  display: block;
  position: absolute;
  bottom: 4.5rem;
  left: 10rem;
}
.dialog-btn.pos-bottom .d-block {
}

.dialog-btn.pos-bottom .d-block li {
  display: block;
  float: left;
  margin-right: 4rem;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.5rem;
  -ms-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.dialog-btn.pos-bottom .d-block li a {
  margin: auto;
  text-align: center;
  width: 100%;
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 1.5rem;
  text-transform: capitalize;
}
.dialog-btn.pos-bottom .d-block li:hover {
  border-bottom: 2px solid;
}
.dialog-btn.pos-bottom .d-block li i.fa {
  font-size: 1.5rem;
  margin-right: 1rem;
}
/* 2.2. All elements at right */
.main-content .right {
  height: 100%;
}
/* 2.2.1. Logo at top right */
.logo-top {
  position: absolute;
  right: 10rem;
  top: 0;
  background: rgb(255, 255, 255, 0.6);
  padding-top: 3rem;
  padding-bottom: 3rem;
  padding-right: 1rem;
  padding-left: 1rem;
}
.logo-top img.logo {
  position: relative;
  display: block;
  width: 10rem;
  height: auto;
  margin: auto;
}
/* 2.2.2. Clock */
.clock-layout {
  width: 40rem;
  height: 40rem;
  margin: auto;
  position: absolute;
  top: 50%;
  margin-top: -20rem;
  right: 50%;
  margin-right: -20rem;
}
.clock-layout .clock-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  margin: auto;
}
/* LOGO */
.clock-container .c-logo-top {
  width: 100%;
  height: 100%;
}
.clock-container .c-logo-top img.logo {
  position: relative;
  top: 9.6rem;
  display: block;
  width: 10rem;
  height: auto;
  margin: auto;
}

.clock-layout .clock-zero {
  top: 50%;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  margin-top: -6.4rem;
  text-align: center;
  font-family: "montserrat_bold", sans-serif;
  font-size: 5rem;
  text-transform: capitalize;
}
.c-layout {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /*        transition: 1s linear;*/
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  transition: 1s;
}
.c-layout.c-metric {
  background: url("../img/clock/metrics.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/* MINUTES */
.c-layout.c-minute {
  background: url("../img/clock/minutes.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/* SECONDS */
.c-layout.c-second {
  background: url("../img/clock/seconds.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/* HOURS */
.c-layout.c-hour {
  top: 65%;
  margin-top: 0;
  text-align: center;
  height: auto;
}
.c-layout.c-hour .number {
  font-family: "montserrat_regular", sans-serif;
  font-size: 4.5rem;
}
/* DAYS */
.c-layout.c-hour .metric {
  font-family: "montserrat_bold", sans-serif;
  position: absolute;
  font-size: 1.7rem;
  margin-top: 0.7rem;
  text-transform: uppercase;
}

.c-layout.c-day {
  text-align: center;
  top: 50%;
  height: auto;
  margin-top: -6rem;
}
.c-layout.c-day .number {
  font-family: "montserrat_bold", sans-serif;
  font-size: 8.2rem;
  display: block;
}
.c-layout.c-day .metric {
  font-family: "montserrat_regular", sans-serif;
  font-size: 2rem;
  letter-spacing: 3.2rem;
  padding-left: 3.1rem;
  text-transform: uppercase;
  margin-top: -1.6rem;
  display: block;
}

/* 3. Dialogs */
.dialog-container,
.dialog-container.invisible {
  display: block;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100%;

  -webkit-perspective: 1000px;
  -ms-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;

  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
  visibility: hidden;
  background: transparent;
}
.dialog-container.visible {
  opacity: 1;
  background: rgba(45, 46, 48, 0.79);
  visibility: visible;
}
.dialog-container,
.dialog-container.invisible {
  opacity: 0;
  visibility: hidden;
}
.dialog-container .dialog-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -ms-transition: 0.6s;
  transition: 0.6s;
}
.dialog-grid.visible {
  -moz-transform: none;
  -ms-transform: none;
  -webkit-transform: none;
  transform: none;
}

.dialog-grid,
.dialog-grid.invisible {
  -moz-transform: rotateX(-180deg) translateY(-50rem);
  -ms-transform: rotateX(-180deg) translateY(-50rem);
  -webkit-transform: rotateX(-180deg) translateY(-50rem);
  transform: rotateX(-180deg) translateY(-50rem);
}

/* 3.1. Dialog frame */
.dialog-container .dialog-frame {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  margin: auto;

  -webkit-perspective: 1000px;
  -ms-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;

  -webkit-transition: 0s;
  -moz-transition: 0s;
  -ms-transition: 0s;
  transition: 0s;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-justify-content: center;
  justify-content: center;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-items: center;
  align-items: center;
}
.dialog-frame.invisible {
  display: none;
}
.dialog-frame,
.dialog-frame.invisible {
  opacity: 0;
}
.dialog-frame.visible {
  opacity: 1;
}

/* 3.2. Dialog content */
.d-content {
  background: rgba(66, 88, 101, 0.35);
  height: auto;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 4px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 4px 1px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 4px 1px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 4px 1px rgba(0, 0, 0, 0.1);

  padding: 1.5rem;
  padding-top: 0;
  width: 40rem;

  margin: auto;
  display: block;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

.d-content p,
.d-content h1,
.d-content h2,
.d-content input,
.d-content textarea,
.d-content a {
  color: #2d2e30;
}
.d-content .d-header .dh-text {
  padding: 0.5rem;
  font-size: 2.5rem;
  color: #2d2e30;
  margin: 0;
  font-family: "montserrat_bold", sans-serif;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 1);
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  margin-bottom: 1.5rem;
  -moz-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0px 0px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0px 0px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0px 0px rgba(0, 0, 0, 0.1);
  padding: 0;
  padding-top: 1.1rem;
  height: 5.2rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.d-header {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}
.dh-text i.fa {
  position: absolute;
  color: #425865;
  left: 0rem;
  top: 0.9rem;
  font-size: 3.5rem;
}
.d-close {
  position: absolute;
  color: #2d2e30;
  right: 0;
  top: 0.7rem;
  font-size: 3.5rem;
  width: 3.5rem;
  height: 3.5rem;
}
.d-close-x {
  display: block;
  content: " ";
  width: 3.5rem;
  margin-top: 17px;
}
.d-close-x:before,
.d-close-x:after {
  content: " ";
  position: absolute;
  left: 0;
  width: 3.5rem;
  height: 2px;
  background: #2d2e30;
}
.d-close-x:after {
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.d-close-x:before {
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* 3.3 Comments dialog */
.d-comment .d-form .f-block {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}
.d-comment .d-form .email-btn-group {
  color: #2d2e30;
  font-family: "bebasneue_regular";
  width: 100%;
  position: relative;
  display: table;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  height: auto;
  margin-bottom: 1rem;
}
.email-input,
.name-input {
  font-size: 1.5rem;
  font-family: "montserrat_regular", sans-serif;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.email-input,
.name-input,
textarea.comment-input {
  border: 0px solid #2d2e30;

  -moz-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0px 0px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0px 0px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0px 0px rgba(0, 0, 0, 0.1);
}
.d-form input.email-input {
  display: block;
  width: 80%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  float: left;
  padding-left: 1.5rem;
}
.d-form button.email-btn {
  color: #f8f9fa;
  background: #2d2e30;
  display: block;
  width: 20%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  float: right;
  border: none;

  -moz-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0px 0px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0px 0px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0px 0px rgba(0, 0, 0, 0.1);
}
.d-form .name-input {
  display: table;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  height: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-bottom: 1rem;
}
.comment-input {
  display: table;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  height: auto;
  max-width: 100%;
  min-width: 100%;
  min-height: 10rem;
  height: 20rem;
  max-height: 20rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* 3.4. Paper styled Dialog (About Us Dialog, Contact Dialog) */
.d-paper {
  font-family: "OpenSans-Light", sans-serif;
  background: #fff;
  padding: 1rem;

  -moz-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0px 0px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0px 0px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.2), 0 0 0px 0px rgba(0, 0, 0, 0.1);
}
.d-paper header {
  text-align: center;
}
.d-paper header h2 {
  font-size: 2rem;
  margin-top: 0rem;
  margin-bottom: 1rem;
  display: block;
  width: 100%;
}
.d-paper header h2 span {
  color: #2d2e30;
}
.d-paper header h2:after {
  content: " ";
  position: relative;
  display: block;
  left: 0;
  margin-top: 1rem;
  width: 30%;
  height: 1px;
  margin-left: 35%;
  margin-right: 35%;
  background: #2d2e30;
}
.d-paper .desc img,
.d-paper header img {
  margin-top: 1rem;
  height: 5rem;
  max-height: 5rem;
}
.d-paper .desc img {
  display: inline-block;
}
.d-paper .desc {
  max-height: 20rem;
  overflow-y: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.d-paper p {
  font-size: 1.5rem;
}
.d-paper .t-large {
  font-size: 2rem;
}
.d-address {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.d-address p {
  font-size: 1.3rem;
  margin: 0;
  font-style: normal;
  font-family: "OpenSans";
  font-weight: 700;
}
img.d-qrcode {
  width: 20rem;
}

/* 4. Footer */
.footer {
  position: fixed;
  bottom: 4%;
  width: 100%;
  left: 0;
}

/* 4.1. Footer Notice */
.footer .notice {
  font-size: 1.2rem;
  margin: 0;
  position: fixed;
  bottom: 5rem;
  right: 10rem;
  /*    font-family: 'montserrat_regular','OpenSans-Light', sans-serif;*/
  font-family: "OpenSans-Light", sans-serif;
  font-weight: 100;
  /*    text-transform: capitalize;*/
}
.footer .notice i {
  font-size: 1.2rem;
  padding-right: 0.5rem;
  /*    vertical-align: middle;*/
}
.footer a {
  /*    color:#64B7E2;*/
  font-weight: bold;
}

/* 6.Screen Responsiveness */
/* Screen Less than 1380px width*/
@media screen and (max-width: 1380px) {
  .header-top {
    margin-left: 7rem;
  }
  .left-desc {
    margin-left: 7rem;
  }

  .dialog-btn.pos-bottom {
    left: 7rem;
  }
  .logo-top {
    position: absolute;
    right: 7rem;
  }

  .footer .notice {
    right: 7rem;
  }
}
/* 8.1. Handset Screen Less than 900px width*/
@media screen and (max-width: 900px) {
  .header-top {
    margin-left: 3rem;
    margin-top: 3rem;
  }
  .left-desc {
    margin-left: 3rem;
    margin-right: 3rem;
  }
  h1.soon {
    font-size: 3rem;
  }
  h2.title {
    font-size: 3rem;
  }
  p.soon-desc {
    margin-top: 0.5rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .logo-top {
    padding-top: 3rem;
  }
  .dialog-btn.pos-bottom {
    left: 3rem;
    bottom: 3rem;
  }

  .clock-layout {
    -moz-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
}
/* 8.2. Handset Screen Less 480px width*/
@media screen and (max-width: 480px) {
  .left.col-50 {
    width: 100%;
    z-index: 10;
  }
  .right.col-50 {
    width: 100%;
    position: absolute;
    right: 0;
    left: 0;
    z-index: 5;
  }
  .clock-layout {
    top: 0;
    right: 0;
    margin-top: -9rem;
    margin-right: -9rem;

    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
  }
  .small-hide {
    display: none;
    visibility: hidden;
  }
}

/* 8.3. Handset Screen Less than 360px width*/
@media screen and (max-width: 360px) {
  .left.col-50 {
    display: block;
  }
  .left-desc {
    position: absolute;
    top: 21rem;
    /*        background: #f6f;*/
    padding-bottom: 6rem;
  }
  .dialog-btn.pos-bottom {
    left: 3rem;
    bottom: 3rem;
    position: fixed;
  }

  .dialog-btn.pos-bottom .d-block li {
    margin-right: 1rem;
  }
  .small-hide {
    display: none;
    visibility: hidden;
  }
}
@media screen and (max-width: 320px) {
  .left-desc {
    position: absolute;
    top: 21rem;
    padding-bottom: 6rem;
  }

  .clock-layout {
    top: 0;
    right: 0;
    margin-top: -9.5rem;
    margin-right: -9.5rem;

    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
  }
  .dialog-btn.pos-bottom {
    left: 3rem;
    bottom: 1rem;
    position: fixed;
  }
}

/* 8.4. Landscape screen handset */
/* Landscape screen more than 22rem width */
@media screen and (max-height: 33.31rem) and (min-width: 22rem) {
  .small-hide {
    display: none;
    visibility: hidden;
  }
}
/* Landscape screen more than 22rem width, and less than  22.31rem height*/
@media screen and (max-height: 22.31rem) and (min-width: 22rem) {
}