/*-----------------------------------------------------------------
[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: 2.0rem;
}

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: 0.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: rgba(255, 255, 255, 0.2);
    padding-top: 5rem;
    padding-bottom: 1rem;
    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;
        margin-top: 10rem;
    }

    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: 22.0rem) {
    .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: 22.0rem) {}


.icon-text-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 10px;
}

.icon {
    font-size: 15px;
    margin-right: 20px;
}

.icon-text {
    font-size: 15px;
}