/* --- Common styles --- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
sysad a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    margin-block-start: 0;
    margin-block-end: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Quicksand', 'Poppins', 'Open Sans', sans-serif;
}

.tc {
    text-align: center;
}

.tl {
    text-align: left;
}

.tr {
    text-align: right;
}

.pr {
    position: relative;
}

.pa {
    position: absolute;
}

.pf {
    position: fixed;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

ul,
ol {
    list-style-type: none;
}

.dark {
    background: #f4f4f4;
}

.dn {
    display: none;
}

body {
    font: 400 14px/24px 'Open Sans', Roboto, Lato, sans-serif;
    letter-spacing: .5px;
    color: #fff;
    background: #00353D;
    line-height: normal;
}

body.scroll-down {
    overflow: hidden;
}

h1 {
    font-size: 1em;
    line-height: normal;
}

h1 span {
    color: #1bc9ec;
}

a {
    color: #138cd6;
    text-decoration: none;
    outline: none;
    border: none;
}

.container {
    width: 100%;
    margin: 0 auto;
}

h2 {
    font-size: 2.5em;
    line-height: normal;
}

p {
    font-size: 1.2em;
    line-height: normal;
    font-weight: 300;
}

.sys-pages {
    background: #00353D url("../images/sys19-bg-pattern.svg") no-repeat center center;
    background-size: 80%;
    text-align: center;
    vertical-align: top;
    overflow: hidden;
}

.sys-pages h2 {
    padding: 0 0 10px 0;
    vertical-align: top;
    font-weight: 600;
}

.btn {
    font-size: 1.2em;
    padding: 8px 30px 0 30px;
    margin: 20px 0 20px 5%;
    color: #fff;
    background: #ff6d00;
    border: 2px solid #ff6d00;
    border-radius: 3px;
    display: inline-block;
    -moz-transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
    transition: all ease-in-out .5s;
    cursor: pointer;
    position: relative;
    height: 30px;
    text-transform: uppercase;
}

.btn:hover,
.btn.rebtn {
    background: transparent;
    border: 2px solid #ff6d00;
}

.btn.rebtn:hover {
    background: #ff6d00;
    border: 2px solid #ff6d00;
}

.btn:before {
    content: "";
    background: #FD8B05 url(../images/sys19-play-icon.svg) no-repeat center center;
    background-size: 24px;
    padding: 8px 20px 0 20px;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: -42px;
    top: -2px;
    border: 2px solid #FD8B05;
    border-width: 2px 0 2px 2px;
    -moz-transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
    transition: all ease-in-out .5s;
    height: 30px;
}

.btn:hover:before,
.btn.rebtn:before {
    background: transparent url(../images/sys19-play-icon.svg) no-repeat center center;
    background-size: 24px;
    border: 2px solid #ff6d00;
    border-width: 2px 0 2px 2px;
}

.ecard-btn:before {
    content: "";
    background: #FD8B05 url(../images/sys19-ecard-icon.svg) no-repeat center center;
    background-size: 24px;
}

.ecard-btn:hover:before {
    background: transparent url(../images/sys19-ecard-icon.svg) no-repeat center center;
    background-size: 24px;
}
#sys19_sec3_btn4, #sys19_sec3_btn3{display: none;}
.btn.rebtn:before {
    background: transparent url(../images/sys19-replay-icon.svg) no-repeat center center;
    background-size: 24px;
}

.btn.rebtn:hover:before {
    background: #FD8B05 url(../images/sys19-replay-icon.svg) no-repeat center center;
    background-size: 24px;
    border: 2px solid #FD8B05;
}
.ecard-closed .btn:before{
    display: none;
}
.anotherid {
    display: inline-block;
    text-align: center;
    padding: 10px 0 5px 0;
    color: #ffffff;
    text-decoration: underline;
}

.anotherid:hover {
    text-decoration: none;
}

/* ------------------------ Section1 styles start ------------------------ */

#section1 .container {
    position: relative;
    z-index: 3;
}

#intro-video {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    z-index: 1;
    -moz-transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
    transition: all ease-in-out .5s;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    background: #000;
    object-fit: cover;
}

.header {
    position: absolute;
    width: 100%;
    z-index: 99;
}

.header h1 {
    float: left;
}

.header .login-sec {
    float: right;
}
.ecard-headerselectlang{
    float: right;
}
div.ecard-headerselectlang {
    display: inline-block;
    vertical-align: middle;
    width: 220px;
    float: right;
    padding: 0;
    -webkit-transition: all 100ms ease-out 200ms;
    -moz-transition: all 100ms ease-out 200ms;
    -o-transition: all 100ms ease-out 200ms;
    transition: all 100ms ease-out 200ms;
    position: relative;
    margin: 0 0 20px 10px;
}
div.ecard-headerselectlang ul {
    padding: 0 0 0 0;
    height: 0;
    overflow: auto;
    position: absolute;
    width: 100%;
    top: 35px;
    background: #fff;
    -webkit-transition: all 200ms ease-out 200ms;
    -moz-transition: all 200ms ease-out 200ms;
    -o-transition: all 200ms ease-out 200ms;
    transition: all 200ms ease-out 200ms;
}
div.ecard-headerselectlang:hover ul {
    height: 300px !important;
    position: absolute;
    top: 48px;
    width: 100%;
}
div.ecard-headerselectlang ul li {
    display: block;
}
div.ecard-headerselectlang p {
    display: block;
    padding: 10px 10px 10px 0px;
    box-shadow: 0px 0px 5px #e3e3e3;
    border-bottom: 1px solid #fff;
    background: #fff url(https://www.manageengine.com/happyholidays/2018/images/dropdown-icon.svg) no-repeat 95% center;
    border-radius: 5px;
    color:#000;
    font-size: 1em;
    font-weight: 400;
    cursor: pointer;
}
div.ecard-headerselectlang ul li p {
    background: #fff;
    border-radius: 0;
}
div.ecard-headerselectlang ul li:hover p {
    background: #00353d;
    color:#fff;
}
div.ecard-headerselectlang p span {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px 0 10px;
}
div.ecard-headerselectlang p img {
    width: 16px;
}


.header-inner {
    padding: 20px;
}

.usrnm {
    display: inline-block;
    vertical-align: top;
    font-size: 1em;
    font-weight: 300
}

.login-sec span {
    display: inline-block;
    vertical-align: top;
    padding: 0 3px;
    font-weight: 300;
}

.login-sec .ur-log-btn {
    font-weight: 600;
    cursor: pointer;
}

.login-sec .ur-log-btn:hover {
    text-decoration: underline;
}

.login-sec span.unverified {
    display: none;
}


.me-logo {
    width: 140px;
}

.sub-head {
    font-size: 1.6em;
    font-weight: 600;
    padding: 0 0 5px 0;
}

.overlay-bg {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .75);
    left: 0;
    top: 0;
    z-index: 2;
}

.scroll-down-icon {
    position: absolute;
    z-index: 2;
    bottom: 4%;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    cursor: pointer;
}

.scroll-down-icon img {
    width: 30px;
}

#section1 h2 {
    font-size: 4em;
    position: relative;
    margin: 0 0 30px 0;
}

#section1 h2:after {
    content: "";
    position: absolute;
    top: 64px;
    left: 0;
    width: 100%;
    height: 59px;
    margin: 0 auto;
    background: url(../images/sys19-title-glowline.png) no-repeat center top;
    background-size: 0;
    -moz-transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
    transition: all ease-in-out .5s;
    transition-delay: .5s;
}

#section1.active h2:after {
    background: url(../images/sys19-title-glowline.png) no-repeat center top;
    background-size: 720px;
}

.participate-btn {
    background: #ff6d00;
    border: 2px solid #ff6d00;
    color: #fff;
    text-transform: uppercase;
    padding: 8px 30px;
    font-size: 1.2em;
    display: inline-block;
    vertical-align: top;
    margin: 20px 10px 10px 10px;
    border-radius: 3px;
    cursor: pointer;
    -moz-transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
    transition: all ease-in-out .5s;
}

.participate-btn:hover {
    background: transparent;
    border: 2px solid #fff;
}

.watchvideo-btn {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    position: relative;
    margin-left: 60px;
}

.watchvideo-btn:hover {
    background: #ff6d00;
    border: 2px solid #ff6d00;
}

.watchvideo-btn:before {
    content: "";
    background: transparent url(../images/sys19-watchvideo-icon.svg) no-repeat center center;
    background-size: 16px;
    padding: 9px 20px 0 20px;
    border-radius: 3px 0 0 3px;
    position: absolute;
    left: -42px;
    top: -2px;
    border: 2px solid #fff;
    border-width: 2px 0 2px 2px;
    -moz-transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
    transition: all ease-in-out .5s;
    height: 30px;
}

.watchvideo-btn:hover:before {
    background: #FD8B05 url(../images/sys19-watchvideo-icon.svg) no-repeat center center;
    background-size: 16px;
    border: 2px solid #FD8B05;
    border-width: 2px 0 2px 2px;
}

.watchvideo-btn img {
    width: 14px;
    height: auto;
    display: inline-block;
    padding: 0 10px 0 0;
    vertical-align: top;
}

/* ------------------------ Section2 styles start ------------------------ */
#section2 h2 {
    position: relative;
    padding: 0 0 60px 0;
}

#section2 h2:after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 59px;
    margin: 0 auto;
    background: url(../images/sys19-title-glowline.png) no-repeat center top;
    background-size: 0;
    -moz-transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
    transition: all ease-in-out .5s;
    transition-delay: .5s;
}

#section2 p#sys19-sec2-line2 span {
    font-weight: bold;
}

#section2 {
    background: #044B57 url("../images/sys19-sec2-bg1.jpg") no-repeat center center;
    background-size: cover;
}

#section2.active h2:after {
    background: url(../images/sys19-title-glowline.png) no-repeat center top;
    background-size: 720px;
}

/* ------------------------ Section3 styles start ------------------------ */
#section3 {
    background: url("../images/sys19-sec3-bg1.png") no-repeat left top, url("../images/sys19-sec3-bg2.png") no-repeat right bottom, url("../images/sys19-bg-pattern.svg") no-repeat right center;
    background-size: 59%, 30%, 50%;
    background-color: #044B57;
}

.activity-list li {
    width: 37%;
    vertical-align: top;
    display: inline-block;
    padding: 15% 6%;
    -moz-transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
    transition: all ease-in-out .5s;
    position: relative;
    left: 0;
    z-index: 3;
}

.ecard-popup {
    display: none;
}

.ecards-img-block {
    text-align: left;
}

.ecards-images ul {
    margin: 20px 0 0 0;
    padding: 0;
}

.ecards-images ul li {
    display: inline-block;
    vertical-align: top;
    width: 18%;
    margin: 0 0.7%;
    -moz-transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
    transition: all ease-in-out .5s;
    cursor: pointer;
}

.ecards-images ul li:hover {
    transform: scale(1.1);
}

.ecards-images ul li img {
    width: 100%;
}

.ecards-img-block,
.ecards-form {
    display: inline-block;
    vertical-align: top;
    width: 50%;
}

.ecards-images {
    width: 94%;
}

.ecards-images>img {
    width: 100%;
    height: auto;
}

.ecards-form {
    overflow: auto;
    width: 30%;
    height: auto;
    margin: 3% 0 0 1%;
    text-align: left;
}

.ecards-images ul li img {
    border: 2px solid #0c4a54;
    width: 100%;
}

.ecards-images li.active img,
.ecards-images li:hover img {
    border: 2px solid #33eb95;
}

.ecard-steps {
   color: #fff;
    padding: 10px 0 10px 2%;
    text-align: left;
    position: absolute;
    top: 0;
    width: 98%;
    background: #023942;
    left: 0;
    border-bottom: 1px solid #1f6d7a;
    z-index: 2;
}

.ecard-steps strong {
    font-weight: 600;
    display: inline-block;
    vertical-align: top;
    padding: 4px;
}

.ecard-steps>span {
    padding: 0 6px 0 6px;
}

.ecard-steps p {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px 0 0;
    font-size: .8em;
    background: url(../images/sys19-arrow.svg) no-repeat right center;
    background-size: 20px;
    padding: 0 40px 0 0;
}

.ecard-steps p:last-child {
    background: none;
    padding: 0;
}

.ecard-steps span {
    color: #7ebfd0;
}

.ecard-steps .step-cont {
    background: #1796b7;
    color: #fff;
    width: 30px;
    height: 25px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 30px;
    font-size: 1.2em;
    font-weight: 600;
    padding-top: 5px;
    margin: 0 10px 0 0;
}

/* ------------------------ Popup styles start ------------------------ */
.popup-container {
    background: rgba(0, 36, 41, .85);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 100%;
    left: 0;
    z-index: 9999999;
    visibility: hidden;
    opacity: 0;
    -moz-transition: all ease-in-out .5s;
    -webkit-transition: all ease-in-out .5s;
    -o-transition: all ease-in-out .5s;
    transition: all ease-in-out .5s;
    overflow: auto;
}

.popup-container.active {
    visibility: visible;
    opacity: 1;
    top: 0;
}

.popup-close, .vpop-close {
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    z-index: 3;
}

.popup-close img,
.vpop-close img {
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
}

.popup-close img:hover,
.vpop-close img:hover {
    -ms-transform: rotate(360deg);
    /* IE 9 */
    -webkit-transform: rotate(360deg);
    /* Safari 3-8 */
    transform: rotate(360deg);
}

.pop-cont h3 {
    font-size: 1.4em;
    font-weight: 600;
    text-align: center;
    margin: 0 0 5px 0;
}

.regfrm-popup .pop-cont {
    width: 450px;
    height: auto;
    padding: 3% 4%;
    margin: 8% auto 0 auto;
    overflow: auto;
}

.pop-cont,
.ecards-pop .pop-cont {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background: #065460;
    border: 2px solid #1790A8;
    border-radius: 4px;
    overflow: auto;
    vertical-align: top;
}

.ecards-pop .pop-cont {
    border: none;
}

.ecards-suc .pop-cont {
    width: 650px;
    height: auto;
}

.verfrm-pop .pop-cont {
    height: auto;
}

.blur {
    -webkit-filter: blur(8px);
    -moz-filter: blur(8px);
    -o-filter: blur(8px);
    -ms-filter: blur(8px);
    filter: blur(8px);
}

.ecards-sec {
    display: none;
    padding: 4% 5%;
    text-align: center;
}

.preview-popup {
    display: none;
}

.top-close {
    background: #000;
    padding: 6px 10px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

submit-block-new {
    margin-bottom: 20px;
}

/* ------------------------ Form styles start ------------------------ */
.reg_form_errors {
    display: none;
    position: absolute;
    bottom: -18px;
    color: #fbbfbf;
    font-size: .8em;
}

input,
textarea {
    background: #046473;
    border: none;
    padding: 10px 2%;
    color: #087788;
    width: 96%;
    font-size: 1em;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    border-radius: 2px;
    border: 1px solid #087788;
}

input:focus,
input:hover,
textarea:hover,
textarea:focus {
    outline: none;
    border: 1px solid #087788;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #087788;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #087788;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #087788;
}
input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="tel"] {
    -moz-appearance: textfield;
}

form select {
    background: #fff url(https://www.manageengine.com/events/images/dropdown-arrow.png) no-repeat 95% center;
    border: none;
    padding: 10px 2%;
    color: #555;
    width: 100%;
    height: auto;
    font-size: 1em;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 2px;
}

form input[type="submit"],
.submit-block input,
.preview-btn {
    background: #FF6C00;
    border: 1px solid #FF6C00;
    color: #fff;
    margin-top: 10px;
    padding: 10px 0;
    font-size: 1.2em;
    cursor: pointer;
    width: 100%;
    border-radius: 3px;
    text-align: center;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    line-height: 20px;
    text-transform: uppercase;
}

form input[type="submit"]:hover,
.submit-block input:hover,
.preview-btn {
    background: transparent;
    border: 1px solid #fff;
}

.preview-btn:hover {
    background: #FF6C00;
    border: 1px solid #FF6C00;
}

input[type="text"]:disabled {
    color: #087788;
}

.form-field {
    display: inline-block;
    width: 98%;
    margin: 10px 0;
    position: relative;
}

form .zc-Radio input {
    width: 20px;
}

form .zc-Radio label {
    color:#086f7f;
    font-size: 1em;
}
.ecards-form form .zc-Radio label{
    display: inline-block;
    width: 90%;
    vertical-align: top;
}
.form-checkfield {
    margin: 10px 5px;
    position: relative;
}

.form-checkfield input {
    width: 10px;
    display: inline-block;
    vertical-align: top;
    position: absolute;
    left: 0;
    top: 0;
}

.form-checkfield label {
    color: #fff;
    font-size: .9em;
    margin: 0 0 0 30px;
    line-height: normal;
    display: inline-block;
}

.privacy-policy,
#meGDPRMessage {
    font-size: .9em;
    font-weight: 400;
    line-height: normal;
}

#meGDPRMessage {
    margin: 0 0 10px 0;
}

.ecards-form #meGDPRMessage {
    margin: 20px 0 0 10px;
}

.ecards-form .privacy-policy {
    margin: 10px 0 20px 10px;
    color: #086f7f;
}
.zc-label-text{color: #086f7f;}
.privacy-policy a {
    color: #086f7f;
    text-decoration: underline;
}

.privacy-policy a:hover {
    text-decoration: none;
}

form .zc-Radio-label {
    margin: 10px 0 10px 0;
    display: block;
    font-weight: 600;
    font-size: 1.1em;
}

form .zc-Radio span {
    padding: 5px 0;
    display: block;
    cursor: pointer;
}

form .zc-Radio input {
    width: 20px;
}

#IframeUrlVer {
    text-align: center;
}

.disabled {
    display: none;
}

.verfication-form .form-field {
    text-align: center;
    margin: 10px 0 20px 0;
}

.verfication-form form input[type="submit"] {
    width: 55%;
}

.verfication-form input[type="tel"] {
    background: url(../images/sys19-line.svg) no-repeat left bottom;
    background-size: 200px;
    font-size: 3em;
    color: #fff;
    line-height: normal;
    letter-spacing: 18px;
    width: 220px;
    outline: none;
    border: none;
    padding: 10px 0;
}

.verfication-form input[type="tel"]:focus,
.verfication-form input[type="tel"]:hover {
    outline: none;
}

.ecards-sec form input[type="submit"],
.ecards-sec .submit-block input {
    width: 50%;
}

.ecards-sec form .preview-popup input[type="submit"] {
    width: auto;
    padding: 10px 20px;
}

.preview-btn {
    display: inline-block;
    width: 40%;
    margin-right: 10px;
}

/* --- Ecard popup styles --- */
.preview-popup,
.video-pop {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .9);
    display: none;
    z-index: 999999;
    overflow-x: auto;
}

.video-closeanywhare {
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background: rgba(31, 42, 66, 0.45);
    position: absolute;
    z-index: 2;
    top: 0;
    display: none;
}

.video-pop {
    height: 100%;
}

.pre-pop-inner {
    background: #065460;
    color: #fff;
    width: 600px;
    margin: -6% auto 0 auto;
    text-align: center;
    transform: scale(.7);
    position: relative;
}

.ecard-prev-maincont {
    padding: 20px;
}

.video-pop-inner {
    background: #081122;
    color: #fff;
    width: 90%;
    height: 80%;
    margin: 5% auto 0 auto;
    padding: 0;
    text-align: center;
    position: relative;
    z-index: 4;
}

.pre-pop-inner img {
    width: 100%;
}

.pre-pop-inner .sysme-logo {
    display: block;
    padding: 0 0 10px 0;
}

.pre-pop-inner .sysme-logo img {
    width: 160px;
}

.preview-popup h4 {
    font-family: 'Quicksand', 'Poppins', 'Open Sans', sans-serif;
    font-size: 1.4em;
    line-height: normal;
    font-style: italic;
    font-weight: 600;
    text-align: center;
    padding: 20px 0;
}

.preview-popup p {
    line-height: 20px;
    padding: 5px 0;
    text-align: left;
    font-size: 1em;
}

.preview-popup p.big-text {
    font-weight: 600;
    padding: 10px 0 5px 0;
}

.ecard-footer {
    background: #083B42;
    text-align: center;
    margin: 0;
    padding: 20px 20px 10px 20px;
    font-size: .8em;
}

.ecard-footer p {
    text-align: center;
}

.preview-popup .submit-block {
    text-align: right;
    position: absolute;
    right: -30%;
    bottom: 0;
}

.submit-block .preview-popup-close {
    position: static;
    padding: 0 0 0 10px;
    display: inline-block;
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}
.act-bar{
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 999999999999999;
    font-size: 0.9em;
    top: -200px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    background: rgb(0, 31, 35);
    border-bottom: 1px solid #095a65;
    padding: 20px 0;
}
.act-bar p{font-size: 1em;padding: 10px;}
#section3.active .act-bar {
    top: 0px;
}
.ecard-closed{display: none;}
/* ------------------------ Game section styles start ------------------------ */
.game-sec {
    display: none;
    margin: 4% 0 0 0;
    position: relative;
}

.ecard-success, .ecard-success-first, .ecard-success-nogame, .ecard-closed {
    display: none;
    text-align: center;
}

.ecard-success h3 {
    font-size: 1.6em;
    margin: 0 0 20px 0
}

.ecard-success br {
    display: none;
}

.succ-msg-btn-grp {
    text-align: center;
    padding: 20px 0 0 0;
}

.succ-msg-btn-grp span {
    margin: 20px 5% 20px 5%;
    cursor: pointer;
}

.ecard-success p, .ecard-success-first p, .ecard-success-nogame p {
    width: 75%;
    margin: 0 auto 20px auto;
}

.ecard-success p#sys19-pop3-line3 {
    margin: 0 auto;
}

/* ------------------------ PastEvents styles start ------------------------ */
#section4 {
    background-color: #044B57;
}

#section4 .container,
#section5 .container {
    overflow: auto;
    height: 100%;
    width: 80%;
    text-align: left;
}

#section4 h2,
#section5 h2 {
    margin: 10% 0 10px 0;
}

.past-sysday-list {
    text-align: center;
}

.past-sysday-list a {
    color: #fff;
}

.past-sysday-list li {
    display: inline-block;
    vertical-align: top;
    list-style-type: none;
    width: 22%;
    margin: 1%;
    position: relative;
    background: #fff;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
}

.past-sysday-list li img {
    width: 100%;
    filter: gray;
    /* IE6-9 */
    -webkit-filter: grayscale(1);
    /* Google Chrome, Safari 6+ & Opera 15+ */
    filter: grayscale(1);
    /* Microsoft Edge and Firefox 35+ */
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
}

.past-sysday-list h5 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 280px 0 20px;
    margin: 0 auto;
    vertical-align: middle;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00353d+0,00353d+22,00353d+22,00353d+38,00353d+57,00353d+70,00353d+81,00353d+100&0+0,1+100 */
    background: -moz-linear-gradient(top, rgba(0, 53, 61, 0) 0%, rgba(0, 53, 61, 0.22) 22%, rgba(0, 53, 61, 0.38) 38%, rgba(0, 53, 61, 0.57) 57%, rgba(0, 53, 61, 0.7) 70%, rgba(0, 53, 61, 0.81) 81%, rgba(0, 53, 61, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 53, 61, 0) 0%, rgba(0, 53, 61, 0.22) 22%, rgba(0, 53, 61, 0.38) 38%, rgba(0, 53, 61, 0.57) 57%, rgba(0, 53, 61, 0.7) 70%, rgba(0, 53, 61, 0.81) 81%, rgba(0, 53, 61, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 53, 61, 0) 0%, rgba(0, 53, 61, 0.22) 22%, rgba(0, 53, 61, 0.38) 38%, rgba(0, 53, 61, 0.57) 57%, rgba(0, 53, 61, 0.7) 70%, rgba(0, 53, 61, 0.81) 81%, rgba(0, 53, 61, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000353d', endColorstr='#00353d', GradientType=0);
    /* IE6-9 */
}

.past-sysday-list li:hover {
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.past-sysday-list li:hover img {
    -webkit-filter: grayscale(0);
    filter: none;
}

/* ------------------------ T&C styles start ------------------------ */
#section5 {
    background: #00353D;
}

#section5 h2 {
    text-align: left;
}

.termsconditions h3 {
    font-size: 20px;
    font-weight: 600;
    padding: 20px 0 5px 0;
    color: #fff;
}

.termsconditions p {
    font-size: 1em;
    font-weight: 300;
    line-height: normal;
    padding: 10px 0;
}

.verfication-form {
    display: none;
}

.verfication-form p {
    font-size: .9em;
    text-align: center;
}

.verfication-form .reg_form_errors {
    left: 0;
    bottom: -21px;
    width: 100%;
    text-align: center;
}

.tnc-btn {
    margin: 20px 0 0 0;
    text-align: center;
}

.tnc-btn a {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin: 0 auto;
    font-size: 1.2em;
    padding: 8px 30px;
    color: #fff;
    background: #ff6d00;
    border: 2px solid #ff6d00;
    border-radius: 3px;
    text-transform: uppercase;
}

.tnc-btn a:hover {
    color: #fff;
    background: transparent;
    border: 2px solid #fff;
}

/* ------------------------ Footer styles start ------------------------ */
.footer {
    text-align: center;
    margin: 10px auto 0 auto;
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    bottom: 0;
    background: #002B31;
    padding: 30px 0;
}

.footer p {
    font-size: 1em;
}

.footer .zoho-division {
    font-size: 1.4em;
    font-weight: 400;
    margin: 0 0 10px 0;
}

.zoho-division img {
    width: 70px;
    display: inline-block;
    vertical-align: top;
}

#backToTop {
    display: none !important;
}

#pp-nav span,
.pp-slidesNav span {
    border: 1px solid #fff !important;
}

#pp-nav li .active span,
.pp-slidesNav .active span {
    background: #fff;
}

/* ------------------------ Mobile lanscape styles ------------------------ */
div.mobile-force-landscape {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: #ccc;
    display: none;
    z-index: 99999999;
}

div.img-container {
    width: 300px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 30%;
}

div.img-container img {
    margin: 50px auto;
    display: block;
    width: 100px;
    -webkit-animation: rotate-landscape 1.5s infinite;
    -moz-animation: rotate-landscape 1.5 infinite;
    -o-animation: rotate-landscape 1.5 infinite;
    animation: rotate-landscape 1.5 infinite;
}

div.img-container p {
    text-align: center;
    font-size: 1.5em;
}

.game-section {
    border-radius: 20px;
}


/* ------------------------ keyframes ------------------------ */
@keyframes rotate-landscape {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

@-webkit-keyframes rotate-landscape {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

@-moz-keyframes rotate-landscape {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

@-o-keyframes rotate-landscape {
    0% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}


/* ------------------------ Responsives styles ------------------------ */
@media all and (orientation: portrait) {
    div.mobile-force-landscape {
        display: block;
    }
}

@media only screen and (min-width: 1600px) {
    .game-sec {
        margin: 8% 0 0 0;
    }

    p {
        font-size: 1.3em;
    }

    .privacy-policy,
    #meGDPRMessage {
        font-size: 1.1em;
    }

    .past-sysday-list h5,
    .termsconditions p {
        font-size: 1.2em;
    }

    #section4 h2,
    #section5 h2 {
        margin: 15% 0 10px 0;
    }
}

@media only screen and (min-width: 1800px) {
    .ecards-sec {
        padding: 8% 10%;
    }

    .pre-pop-inner {
        width: 550px;
        margin: 0 auto;
    }

    .activity-list li p {
        width: 65%;
        margin: 0 auto;
    }

    .game-sec {
        margin: 10% 0 0 0;
    }

    #section4 .container,
    #section5 .container {
        width: 60%;
    }
}

@media only screen and (min-width: 2000px) {
    .ecards-sec {
        padding: 8% 16%;
    }
}

@media only screen and (max-width: 1600px) {
    .ecards-form {
        margin: 0 0 0 1%;
    }
}

@media only screen and (max-width: 1400px) {
    #section3 {
        background: url("../images/sys19-sec3-bg1.png") no-repeat -25% top, url("../images/sys19-sec3-bg2.png") no-repeat right bottom, url("../images/sys19-bg-pattern.svg") no-repeat right center;
        background-size: 67%, 30%, 50%;
        background-color: #044B57;
    }

    .ecards-sec {
        padding: 4% 0;
    }

    .ecards-img-block {
        width: 48%;
    }
}

@media only screen and (max-width: 1200px) {
    #section3 {
        background: url("../images/sys19-sec3-bg1.png") no-repeat -100% top, url("../images/sys19-sec3-bg2.png") no-repeat right bottom, url("../images/sys19-bg-pattern.svg") no-repeat right center;
        background-size: 80%, 30%, 50%;
        background-color: #044B57;
    }

    .ecards-img-block {
        width: 55%;
    }

    .ecard-steps p {
        background: url(../images/sys19-arrow.svg) no-repeat right center;
        background-size: 10px;
        padding: 0 20px 0 0;
    }

    .ecards-form form {
        width: 95%;
    }

    form .zc-Radio label {
        font-size: .9em;
    }

    .ecards-images ul li {
        width: 17%;
    }
    .ecards-form form .zc-Radio label{width:86%;}
}

@media screen and (max-width:1700px) and (min-height:860px) {
    #section3 {
        background: url("../images/sys19-sec3-bg1.png") no-repeat -23% top, url("../images/sys19-sec3-bg2.png") no-repeat right bottom, url("../images/sys19-bg-pattern.svg") no-repeat right center;
        background-color: rgba(0, 0, 0, 0);
        background-size: auto, auto, auto;
        background-size: 67%, 30%, 50%;
        background-color: #044B57;
    }
}

@media screen and (max-width:1300px) and (min-height:920px) {
    #section3 {
        background: url("../images/sys19-sec3-bg1.png") no-repeat -70% top, url("../images/sys19-sec3-bg2.png") no-repeat right bottom, url("../images/sys19-bg-pattern.svg") no-repeat right center;
        background-color: rgba(0, 0, 0, 0);
        background-size: auto, auto, auto;
        background-size: 77%, 30%, 50%;
        background-color: #044B57;
    }
}

@media screen and (max-width:1300px) and (max-height:650px) {

    #sys19-sec5-line3,
    #sys19-sec5-line4 {
        display: none;
    }
}

@media only screen and (max-width: 1000px) {

    html,
    body {
        overflow: auto;
    }

    p {
        font-size: 1em;
    }

    .sys-pages {
        min-height: 300px;
    }

    #section1 h1 {
        top: 10%;
        left: 0;
        z-index: 4;
        width: 100%;
        text-align: center;
    }

    .me-logo {
        width: 200px;
    }

    #intro-video {
        position: static;
    }

    #section1,
    #section2 {
        position: relative;
    }

    #section2 {
        padding: 7% 0;
    }

    #section1 .container {
        position: absolute;
        z-index: 3;
        top: 20%;
    }

    #section2 .container,
    #section3 .container {
        margin: 10% 0;
    }

    #section1 h2 {
        width: 75%;
        margin: 0 auto 30px auto;
    }

    #section2 h2 {
        width: 75%;
        margin: 0 auto;
    }

    #section4 {
        padding: 0 0 10% 0;
    }

    #section4 h2 {
        font-size: 2em;
    }

    #section5 {
        padding: 0 0 20% 0;
        position: relative;
    }

    .past-sysday-list h5 {
        padding: 200px 0 20px;
    }

    .ecards-img-block {
        width: 75%;
        margin: 0 0 0 3%;
    }

    .ecards-form {
        width: 65%;
        margin: 3% 0 0 3%;
    }

    .activity-list li {
        padding: 2% 5%;
    }

    .activity-list li p {
        font-size: 1em;
    }

    .game-sec {
        margin: 0;
    }

    .regfrm-popup .pop-cont {
        margin: 0 auto;
        transform: scale(.7);
        height: 95%;
    }

    .ecards-pop .pop-cont {
        transform: scale(1);
    }

    .ecards-pop .pop-cont {
        margin: 0 auto;
        height: 100%;
    }

    .ecards-form .preview-btn {
        display: none;
    }

    /* CSS specific to iOS devices */
    @supports (-webkit-overflow-scrolling: touch) {

        p,
        .termsconditions p,
        .activity-list li p {
            font-size: .8em;
        }
    }

}

@media only screen and (max-width: 680px) {
    #section1 h2 {
        font-size: 3em;
    }

    #section1 h2::after {
        top: 50px;
    }
}