/* Reset CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 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 }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
body { line-height: 1 }
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 }
.clearfix:before, .clearfix:after { display: table; line-height: 0; content: "" }
.clearfix:after { clear: both }
/* onepage scroll Document */
body, html { font: 400 14px/24px 'Open Sans', sans-serif; }
body, html, #index, section { width: 100%; height: 100%; }
a { text-decoration: none; }
header { background: #000; padding: 5px 0 5px 0px; border-bottom: 3px solid #0aaa6b; overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; z-index:9999; }
.fl { float: left; }
.fr { float: right; }
.pr { position: relative; }
.logo a {     background: url(https://www.manageengine.com/california-consumer-privacy-act-ccpa-compliance-tools-and-resources/images/manageengine-logo.svg) no-repeat left top;
    width: 270px;
    height: 45px;
    text-indent: -99999em;
    display: inline-block;
    background-size: 90%;
    background-position: center; }
.main-menu { margin: 5px 150px 0 0; }
.main-menu li { display: inline-block; padding: 5px 15px; }
.main-menu li a { display: block; color: #ffcc33; padding: 5px; font-size: 1.2em; }
.main-menu li.active a { color: #FFF; }
.main-menu:after { position: absolute; right: -20px; top: -20px; width: 150px; height: 150px; background: #0aaa6b; -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari */ -o-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg); }
#Home { background: url(../images/video-bg-image.jpg) repeat; -ms-background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position:relative;  overflow:hidden;}
#Infographics{background:url(../images/texture.jpg) repeat;}
.infographics-container{width:40%; height:auto; margin:0 auto; display:block;}
.infographics-container h1{font-size:4em; text-align:center; color:#333; padding-top:10%;}
.slider-container{/*box-shadow:1px 1px 7px #666;*/ padding-top:13%;}
.info-graphics-top{display:block; width:100%;}
#slides{ }
#slides a.slidesjs-previous{width:50px; height:50px; text-indent:-9999em; overflow:hidden; background:url("../images/info-prev-arrow.png") no-repeat;position:absolute; top:50%; left:20%; z-index:999;}
#slides a.slidesjs-previous:hover{background:url("../images/info-prev-arrow-hover.png");}
#slides a.slidesjs-next{width:50px; height:50px; text-indent:-9999em; overflow:hidden; background:url("../images/info-next-arrow.png") no-repeat;position:absolute; top:50%; right:20%; z-index:999;}
#slides a.slidesjs-next:hover{background:url("../images/info-next-arrow-hover.png");}
.bg-pixel{width:100%; height:100%; position:absolute; left:0; top:0; background:url(../images/pixel.png) repeat; z-index:1; opacity:0.5;}
#Home iframe{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:99; }
.vclose{background: url(../images/sysadmin-sprite.png) no-repeat -145px -64px; width: 50px; height: 50px; display: inline-block; text-indent: -9999em; position:absolute; z-index:100; cursor:pointer; right:10px; top: 75px; }
#Home .vclose{display:none;}
.hero-video{display: block;position: absolute;top: 50%;left: 50%;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-o-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%); min-width: 100%;min-height: 100%;width: auto;height: auto;z-index: 0;overflow: hidden;}
.hero-video video{opacity:1;width: 100%;height: 100%;transition: all 0.5s ease 0s;}
.home-container { width: 100%; margin: 0 auto; text-align: center; }
.ply-btn { background: url(../images/sysadmin-sprite.png) no-repeat -415px -5px; width: 100px; height: 100px; text-indent: -9999em; display: inline-block; margin-top: 18%; cursor: pointer; }
.ply-btn:hover{filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter: gray; -webkit-filter: grayscale(50%); }
.wv-text, h3, .pg-left p { color: #FFF; }
.hsad-text { color: #f6cd2b; }
.hsad-logo { background: url(../images/sysadmin-sprite.png) no-repeat left -120px; width: 500px; height: 150px; margin: 0 auto; display: inline-block; text-indent: -9999em; }
.pnext { background: url(../images/sysadmin-sprite.png) no-repeat -345px -40px; width: 60px; height: 60px; margin: 0 auto; display: inline-block; text-indent: -9999em; position: fixed; bottom: 25px; left: 48%; cursor: pointer; opacity:.7; z-index:9999; }
.pnext:hover{ opacity:1;}
.pg-left, .pg-right { width: 50%; }
#Game{background: #1e272c; overflow:hidden;}
.game-container{ height:100%;}
.full-container{ height:70%;}
.game-container .full-container{padding: 10px 20px;}
.game-container .pg-left { background: #09a465; height: 100%; }
.meme-container .pg-left, .ecard-container .pg-left { background: #f6cd2f; height: 100%; }
.meme-img{ padding:25% 0 0 0; text-align:center;}
.cont-container { padding: 20px 20px; }
a.gif-contests img{margin-top:10%; }
.cont-container-asides{width:100%; float:left; margin:5% 5% 0 0%;}
.cont-container-asides:first-child{margin:15% 5% 0 0;}
.contest-connt{width:50%; float:left;}
.cont-container-asides a{width:100%; display:block;}
.cont-container-asides p a{color:#333;}
.cont-container-asides img{}
.gif-contest2 img{margin-top:28%;}
.cont-container p { margin-bottom: 10px; }
h2 { font-size: 3em; padding: 10px 20px; color: #FFF; margin: 70px 0 0 0; }
.meme-container h2, #Game h2{ color:#333;}
h3 { font-size: 1.5em; font-weight: 400%; margin-bottom: 10px; }
.meme-container h3{ margin-top:10%; padding:20px 0;}
.info-container { background: #09a465; text-align: center; }
.info-container img { width: auto; height: 75%; margin: 3% auto; }
.info-container h2 { margin: 70px 0 0 0; }
.ecard-list li { width: 45%; margin: 0 2% 2% 0; text-align: center; position:relative; }
.ecard-list li img, .prv-ecard img { width: 90%; height: auto; }
.ecard-list li .ecard-thumb{ cursor:pointer; position:relative;}
.ecard-list li:first-child .ecard-thumb .mask{display:none;}
.ecard-active{box-shadow:1px 1px 8px #fff; opacity:0.5;}
.ecard-list li span.mask{ background: rgba(0,0,0,.51) url(../images/sysadmin-sprite.png) no-repeat -83px -61px; text-indent:-9999em; position:absolute; width:40px; height:40px; top:40%; left:45%; opacity:1; -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; transition:all .2s ease-in-out; -webkit-border-radius:500px;-moz-border-radius:500px;-webkit-border-radius:500px;-o-border-radius:500px;-ms-border-radius:500px;border-radius:500px; cursor:pointer;}
.ecard-list li:hover span.mask{ opacity:1; width:40px; height:40px; top:40%; left:45%;}
.ecard-list li img{ border:3px solid rgba(255,255,255,0);-webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; transition:all .2s ease-in-out; }
.ecard-list li:hover img{border:3px solid #09a465;}
.prv-ecard { text-align: center; position:relative; }
.prv-ecard .pitstop-loader{ display: none; position:absolute; left:49%; top:49%;}
#Ecards .pg-right h2 { font-size: 1.8em; color: #333; margin-bottom: 5%; }
.send-ecards { background: #09a465; color: #FFF; font-size: 3em; padding: 20px; display: inline-block; margin-top: 4%; }
footer { background: #000; padding: 5px; color: #FFF; font-size: .9em; position: fixed; bottom: 0; left: 0; width: 100%; display: none; z-index:9999; }
.fot-logo { background: url(../images/sysadmin-sprite.png) no-repeat -5px -67px; width: 50px; height: 20px; display: inline-block; text-indent: -9999em; }
.icon-fb, .icon-tw, .icon-yt { background: url(../images/sysadmin-sprite.png) no-repeat -250px -70px; width: 20px; height: 20px; display: inline-block; text-indent: -9999em; }
.icon-tw { background-position: -275px -70px; }
.icon-yt { background-position: -300px -70px; }
.ecards-popup{ position:fixed; top:10%; left:10%; width:80%; background:#000; border:3px solid #09a465;  z-index:111; display:none; }
.ecards-popup-container{padding:10px; height:500px; overflow-y:auto;}
.ecards-popup h3{ background:#555; padding:15px 10px; color:#FFF; font-size:2em;}
.ecards-popup .fl{ width:50%; text-align:center; vertical-align: middle; min-height:400px;}
.ecards-popup .fl img{ width:60%; height:auto; margin-top:20%;}
.ecards-popup .vclose{ top:5px; right:0px; }
.footer-right-logo{padding-right:15px;}
.bannerflex { width: 100%; margin: 86px auto 0; background: #efefef }
.flexMobile { display: none }
.flexslider { margin: 0 auto; position: relative; overflow: hidden; max-height: 900px; position: relative; display: block; width: 1000px; max-width: 100%; }
.flexslider .flexBnrslides { padding: 0!important; margin: 0!important }
.flexslider .flexBnrslides > li { display: none; -webkit-backface-visibility: hidden; float: left }
.flexslider .flexBnrslides > li.flex-active-slide { -webkit-backface-visibility: visible }
.flexslider .flexBnrslides > li:first-child { display: block }
.flexslider .flexBnrslides img { max-width: 100%; display: block; margin: 0 auto }
.flexslider .flexBnrslides > li>a { display: block; max-width: 100% }
.flexslider .flexBnrslides > li div a { display: inline-block; max-width: 100% }
.flex-pauseplay span { text-transform: capitalize }
.flex-control-nav { position: absolute; text-align: center; right: 0; left: 0; bottom: 0px; z-index: 90 }
.flex-control-nav li { margin: 0 3px; display: inline-block }
.flex-control-nav li a { background: #ccc; cursor: pointer; border-radius: 5px; height: 10px; width: 10px; display: block }
.flex-control-nav li a.flex-active { background: #74B223; color: #FFF }
.flex-control-nav li a:hover { text-decoration: none }
.flex-direction-nav { display: block }
.flex-direction-nav li a { height: 50px; width: 50px; display: block; color: transparent; -webkit-transition: all .3s ease; position: absolute; top: 50%; margin-top: -20px; opacity: 0 }
.flex-direction-nav li a.flex-prev { background: url(../images/info-prev-arrow.png); }
.flex-direction-nav li a.flex-next { background: url(../images/info-next-arrow.png); }
.flexslider:hover a.flex-prev { opacity: 0.3; left: 5px }
.flexslider:hover a.flex-next { opacity: 0.3; right: 5px }
.newbnrtxt { position: absolute; z-index: 90; display: block; transition: all 0.2s ease-in-out 0s; text-align: left; color: #000; font-size: 34px; font-weight: 300; line-height: 50px; padding: 0 }
.bnr-dwn, .bnr-btn { display: inline-block; margin: 0 }
.bnr-dwn a, .bnr-btn a { background: #ED1C24; color: #fff; text-transform: none; font-weight: 300; padding: 10px 20px; font-size: 34px; display: inline-block; line-height: 34px; transition: all 0.2s ease-in 0s; border-radius: 5px; display: inline-block!important }
.bnr-btn a { background: #424f56 }
.bnr-dwn a:hover, .bnr-btn a:hover { text-decoration: none; background: #df200f }
.bnr-btn a:hover { background: #394348 }
.terms-list{ list-style: inside decimal; color:#FFF; padding:20px 30px;}
.terms-list li{ padding-bottom:30px;}
.info-button{ background:url(../images/info-button.png) no-repeat left top; color:#FFF; font-size:15px; padding:20px 10px 20px 20px; position:absolute; top:50%; right:0px;}