@charset "utf-8";

/*--------------------------------------------------------------------------------------------------
CSS Styles for ALISTA.

version:   1.0
--------------------------------------------------------------------------------------------------*/


/* =Typography
--------------------------------------------------------------------------------------------------*/

/* Setting up the fonts */
html {height: 100%;}
body {height: 100%; color: #000; font-weight: normal; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 19px; background: #fff;}

/* End Typography
--------------------------------------------------------------------------------------------------*/

/* =Links
--------------------------------------------------------------------------------------------------*/
a {color: #35b6b4; text-decoration: underline;}
a:hover {text-decoration: none;}
/* End Links
--------------------------------------------------------------------------------------------------*/

/* =Main Content
--------------------------------------------------------------------------------------------------*/
* {box-sizing: border-box;}
#main {margin: 0; height: 100%; position: relative; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; overflow: hidden;}
#content {flex: 1 0 auto; -webkit-flex: 1 0 auto; display: -webkit-flex; display: flex; text-align: center; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; background: url(../img/bg.svg) 0 0 no-repeat, url(../img/bg.jpg) 0 0 no-repeat; background-size: cover;}
.logo-box {width: 90%; max-width: 485px; background: #fff; box-shadow: -3px 3px 12px rgba(0,0,0,0.2); position: relative; padding: 94px 0 50px;}
.logo-box .claim {position: absolute; top: 35px;right: 0; width: 100px;}
.logo-box .logo {width: 224px; display: inline-block;}
.logo-box-text {color: #35b6b4; text-transform: uppercase; font-weight: 700; font-size: 20px; margin: 14px 0 0;}
/* =End Main Content
--------------------------------------------------------------------------------------------------*/


/* =Footer
--------------------------------------------------------------------------------------------------*/
#footer {flex: 0 0 auto; -webkit-flex: 0 0 auto;}
#footer p {padding: 15px 20px 30px; font-size: 18px;}
#footer p a {color: #000; text-decoration: none;}
#footer p a:hover {text-decoration: underline;}

.popup-wrapper {display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; width: 100%; height: 100%; background: url(../img/bg.svg) 0 0 no-repeat, url(../img/bg.jpg) 0 0 no-repeat;}
.popup {width: 100%; max-width: 1071px; height: calc(100% - 50px); margin: 50px 0 0; position: relative;}
.popup-close {position: absolute; top: -41px; right: 23px; background: url(../img/close.svg) 0 0 no-repeat; background-size: cover; width: 24px; height: 24px; cursor: pointer;}
.popup-inner {height: 100%; overflow: hidden; background: #fff; box-shadow: -3px 3px 12px rgba(0,0,0,0.2); text-align: left;}
.popup-logo {margin: 30px 8px; width: 137px; display: block;}
.popup-text {padding:0 15px 50px;}
.popup-text h2 {font-size: 20px; text-transform: uppercase; font-weight: 800; color: #35b6b4; margin: 0 0 35px;}
.popup-text h3 {font-size: 17px; font-weight: 700; margin: 0 0 20px;}
.popup-text h4 {font-weight: 700;}
.popup-text p {margin: 0 0 20px;}
.popup-text p em {font-style: italic;}

.nicescroll-rails-vr {opacity: 1 !important;}
.nicescroll-rails-vr .nicescroll-cursors {margin: 0 7px 0 0;}

/* End Footer
--------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 768px) {
  #footer p {padding: 5px 20px 20px 192px; font-size: 22px;}
  .popup {padding: 0 30px 30px;}
  .popup-text {padding:0 30px 50px; columns: 2; column-gap: 60px;}
  .popup-logo {margin: 48px 23px;}
  .logo-box {padding: 114px 0 80px;}
  .nicescroll-rails-vr .nicescroll-cursors{margin: 0; left: 20px;}
}

@media screen and (min-width: 1024px) {
  #footer p {padding: 5px 20px 62px 192px;}
}

@media screen and (min-height: 750px) {
  .popup {height: 657px;}
}

@media screen and (orientation : portrait) {
  #content, .popup-wrapper {background-size: 100% 100%;}
}

@media screen and (orientation : landscape) {
  #content, .popup-wrapper {background-size: contain;}
}

@media screen and (orientation : landscape) and (max-height: 600px) {
  .logo-box {padding: 50px 0;}
}