/*
Landing Page CSS
*/

/* General
=================================================== */
html { font-size: 62.5%; -webkit-font-smoothing: antialiased; }
body { background: #fff; height: 100vh; width: 100%; margin: 0;padding: 0; }

/* Landing
=================================================== */
.landing-container { min-height: 100vh; position: relative; width: 100%; height: 100%; }
.landing-inner { clear: both; display: flex; flex-direction: row; margin: 0 auto; max-width: 100%; padding: 0; width: 100%; height: 100%; }

.landing-logo { padding: 4em 0; text-align: center; }

.left-column { display: flex; flex-direction: column; flex: 4; align-items: center; justify-content: center; height: 100vh; overflow-y: auto; }
.left-column-inner { display: flex; flex-direction: column; justify-content: space-between; margin: auto; max-height: 100%; width: 100%; height: 100vh; overflow-x: hidden; }

.landing-logo { padding: 4em 2em; }
.landing-logo img { height: auto; max-width: 400px; width: 100%; }

.landing-content { display: flex; flex-direction: column; margin: 2em auto; padding: 2em 4em; }

.landing .landing-details { padding-bottom: 3rem; }
.landing .landing-details p { color: #000; font-family: 'Poppins', sans-serif; font-size: 2rem; font-weight: 400; line-height: 1.4; margin: 0; padding: 0; }

.landing-footer { display: flex; flex-direction: column; align-items: center; padding: 0 2em 2em; }
.landing-footer p { color: #000; font-family: 'Poppins', sans-serif; font-size: 1.6rem; font-weight: 400; line-height: 1.4; margin: 0; padding: 0; }
.landing-footer p span { color: #163d6e; font-weight: 600; text-decoration: none;  }
.landing-footer p a { color: #163d6e; text-decoration: none; }
.landing-footer p a span { color: #163d6e; font-weight: 600; text-decoration: none;  }

.right-column { flex: 6; }

.hero { background: url(../img/hero.jpg) no-repeat center center / cover; height: 100vh; }

/* Responsive
-------------------------------- */
@media only screen and (max-width: 1280px) {
.left-column { flex: 5; }
.hero { background: url(../img/hero.jpg) no-repeat 15% 50% / cover; }
}

@media only screen and (max-width: 1140px) {
.left-column { flex: 5; }
.hero { background: url(../img/hero.jpg) no-repeat 20% 50% / cover; }
}

@media only screen and (max-width: 1023px) {
.left-column { flex: 6; }
.hero { background: url(../img/hero.jpg) no-repeat 10% 50% / cover; }
}

@media only screen and (max-width: 880px) {
.right-column { display: none; }
}

@media only screen and (max-width: 480px) {
.landing-logo { padding: 2em 2em 1em; }
.landing-logo img { max-width: 300px; }
.landing-content { padding: 2em; }
.landing .landing-details p { font-size: 1.8rem; }
}