body {background:#fff; font-family:'Roboto'; }
input[type="button"] {-webkit-appearance:none;}
#breadcrumbs {display:none;}
.container {max-width: 1200px; margin:0 auto; position:relative; padding: 0px 20px;}
.hidden {display:none !important;}
.noPad {padding: 0px;}

.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

/*Top Nav Social Icons*/
#navSocial { position:absolute; right: 80px; top: 30px;}
#navSocial li {display:inline-block; margin-right: 12px; }
#navSocial li a {color:#333; text-shadow:0 1px 0 rgba(0,0,0,0.2); font-size: 24px;}
#navSocial li a:hover {color:#000;}
#navIcon { border-radius: 2px; font-size: 24px; color:#fff; position:absolute; left: -70px; top: 14px; border:#fff; border:10px solid rgba(255,255,255,0.4); cursor:pointer; z-index:999}
#navIcon i {background:#111; padding: 5px 10px; border-radius: 2px;}
@media (max-width:480px){ #navSocial {display:none;} }

/*HEADER*/
header {background:#fff; background:rgba(255,255,255,0.8); height: 80px; display:block;}
header img {height: 60px; margin:8px 10px;}
header nav {position:absolute; left: 280px; width: 700px; top: 13px;}
header nav>ul>li {cursor:pointer; display:inline-block; padding: 20px 18px 40px 8px; color:#555; position:relative; font-size: 16px; font-family:'Roboto'; font-weight: 300; color:#666;}
header nav>ul>li a {color:inherit; letter-spacing:0.5px;}
header nav>ul>li:after {content:"/";  position:absolute; right: 0; top: 22px; font-size: 16px; color:#ddd;}
header nav>ul>li:last-child:after {content:"";}
header nav>ul>li>ul {box-shadow:0 10px 10px rgba(0,0,0,0.3); border-radius: 0 0 12px 0; display:block; -o-transition: all 0.4s; -moz-transition: all 0.4s; -webkit-transition: all 0.4s;  -ms-transition: all 0.4s; transition: all 0.4s;  opacity:0; visibility:hidden; position:absolute; top: 67px; background:#fff; z-index:100;}
header nav>ul>li:hover ul { visibility:visible; opacity:1;}
header nav>ul>li>ul>li {white-space:nowrap; padding: 5px 30px 5px 15px; font-size: 16px; border-bottom:#000; border-bottom: 1px solid rgba(0,0,0,0.1); font-weight: 100; color:#555; cursor:pointer; }
header nav>ul>li>ul>li:last-child {border-bottom: none;} 
header nav>ul>li>ul>li:before {content:"\f054"; padding-right: 10px; font-family:'FontAwesome'; color:#09f;}
header nav>ul>li>ul>li:hover {background:#09f; color:#fff !important;}
header nav>ul>li>ul>li:hover:before { color:#fff !important;}
header nav>ul>li>ul>li:hover:last-child {border-radius:0 0 10px 0;}
header nav>ul>li>ul>li a {color: inherit;}
header nav ul .noTopNav {display:none;}
@media (max-width:1070px){ header nav {display:none;} }

#slideNav {width: 250px; background:#111; box-shadow:inset 30px 0 100px rgba(0,0,0,0.02); z-index:500; height: 100%; right:-250px; position:fixed;  -o-transition: right 0.5s; -moz-transition: right 0.5s; -webkit-transition: right 0.5s;  -ms-transition: right 0.5s; transition: right 0.5s; top:0;}
#wrapper {position:relative; left:-0;  -o-transition: left 0.5s;  -moz-transition: left 0.5s; -webkit-transition: left 0.5s;  -ms-transition: left 0.5s; transition: left 0.5s; }
.slideNavOn {right:0 !important;}
.wrapperOn {left:-250px !important;}
#slideNav .disabledNav {color:#555 !important;}
.nav_first .disabledNav {color:#ddd !important; cursor:default;}
#slideNav>ul {display:block; height:auto;}
#slideNav>ul>li {font-weight: 300; padding: 10px 20px; font-size: 22px; border-top: #fff; border-top: 1px solid rgba(255,255,255,0.1); border-bottom:  #000; border-bottom: 1px solid rgba(0,0,0,0.1); color:#ddd;}
#slideNav>ul>li:hover {color:#fff;}
#slideNav>ul>li>ul>li {font-weight: 300; padding: 5px 0; font-size: 13px; color:#ddd; -o-transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;  -ms-transition: all 0.5s; transition: all 0.5s; }
#slideNav>ul>li>ul>li:hover {margin-left: 10px; color:#09f;}
#slideNav>ul>li>ul>li:first-child {padding-top:10px;}
#slideNav>ul>li>ul>li:before {content:"\f054"; padding-right: 5px; font-family:'FontAwesome';}
#slideNav li {cursor:pointer;}
#slideNav li:active {color:#000;}
#slideNav li a {color: inherit;}
#SocialSharing {width: 100%; max-width: 1200px; margin:0px auto; padding: 10px 20px;}

.siteHeader .freeTrial {color:white; background:red; padding: 5px 10px 3px 10px; box-shadow:inset 0px 5px 15px rgba(0,0,0,0.2); border-bottom: 2px solid rgba(0,0,0,0.1); border-radius: 4px; margin-left:10px;}
.siteHeader .freeTrial a { font-weight:bold !important; }
.siteHeader .freeTrial:hover {background:#d00;}
@media (max-width:1200px){
.siteHeader .freeTrial {position:fixed; top: 90px; z-index:999; right: 15px;}

}

/*FOOTER*/
footer {background:#000 !important; padding: 0px 0 15px 0;  display:block; position:relative; height: 100px;}
footer .footCopy {color:#bbb; font-size: 10px; font-weight: 300; text-align:left; display:block; margin-top: 5px;}
#footSocial {display:block; margin-left:-15px; margin-top: 15px; }
#footSocial {font-size: 0;}
#footSocial li {display:inline-block; margin-right: 5px; font-size: 26px; width:30px; height: 30px; text-align:center; }
#footSocial li a {color:#fff; padding: 5px;}
#footSocial li:hover {opacity:0.8;}
.footLegals {text-align:left; font-size:12px; color:#eee; margin-top: 10px;}
.footLegals a {color:#ddd; font-weight: 300; padding:0 15px 0 0; font-size: 14px; display:inline-block;}
.footLegals a:last-child:after {opacity:0;}
.footLegals a:hover {color:#fff;}
footer .footerNinjaLogo {position:relative;; left: 5px; top: 10px; width: 80px; height: 80px;}
.logos3rdparty {width: 100%; margin-top: 25px;}

.fIcon {font-size: 64px; text-align:center; color:#999; text-align:right; }

@media (max-width:980px) and (min-width: 768px){
footer .container {padding:0px 15px;}
.footLegals a {font-size: 11px;}
}    
@media (max-width: 768px) {
footer .container {padding:0px 15px;}
.footLegals a {font-size: 11px;}
footer {height:160px;}
.logos3rdparty {padding:0px 20%; margin-top: 10px;}
.fIcon {text-align:center; margin-top: 20px;}
.content {padding: 0px 25px;}
.content h1 {font-size:32px !important; margin-top: 25px;}
.content h2 {text-align:center; font-size: 22px !important;}
.hide768 {opacity:0;}
}    
.content a {color:#09f !important; font-weight:400; }
.content a:hover {color:#069 !important; }






/* PARALLAX CONTENT */
.parallax-content {position:absolute; top:0; left:0; width:100%; padding: 50px; text-align:center;}

/* CONTACT MODULE*/
.contactForm form {width: 960px; margin:0 auto; position:relative; padding-bottom: 20px;}
.contactForm form label {display:inline-block; width: 90px; font-size: 14px; color:#999; font-weight: 300; vertical-align:top; padding-top: 10px;}
.contactForm form div {width: 50%; padding: 5%; display:inline-block; vertical-align:top; padding: 0px;}
.contactForm form div input {width: 320px; margin-bottom: 20px; font-size: 15px; border: 2px solid #ccc; padding: 4px 20px; border-radius: 6px; outline:0;
transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out;
}
.contactForm form div input:hover {background:#eee;}
.contactForm form div input:focus {color:#fff; background:#672367;}
.contactForm .labwide {width: 600px; margin-left: 50px;}
.contactForm .labwide input {margin-right: 20px; position:relative; top:-2px;}
#rgeSubmit {position:absolute; bottom: 10px;right: 70px; width: 320px; background:#672367; padding: 5px 20px; color:#fff; border:none; border-radius:6px; font-size: 16px;
transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; outline:0;
}
#rgeSubmit:hover {background:#000;}
#rgeSubmit:active {background:#eee; color:#000;}

@media (max-width:960px){ 
.contactForm  form {width:80%; margin-left: 10%; padding:0px 20px 60px 20px;}
.contactForm form div {width: 100%;}
.contactForm form div label {width: 25%;}
.contactForm form div input {width:75%;}
#rgeSubmit {width: 80%; left: 10%;}
.contactForm .labwide {width: 100%; text-align:center; margin-left: 0px;}
}
@media (max-width:480px){ 
.contactForm form div label {display:none;} .contactForm form div input {width:100%;}
}



/* CONTENT CLASSES */
.content h1 {font-size: 60px; color:#692469; font-weight: 100; margin-bottom: 20px;}
.content p {font-size: 16px;font-weight: 300;line-height: 1.8;margin-bottom: 8px;color:#444;}
.content h2 {font-size: 32px;color:#333;font-weight: 300;margin-bottom: 12px;margin-top: 20px;}
.content blockquote {position:relative; padding: 0px 30px; text-align:center; font-size: 24px; line-height:32px; color:#692469;}
.content blockquote:before {content:"“"; position:absolute; left:0px; top:20px; font-size: 100px; font-family:Arial; color:#ccc;}
.content blockquote:after {content:"”"; position:absolute; right:0px; bottom:-20px; font-size: 100px; font-family:Arial;  color:#ccc;}
.content address {font-style:normal;}
.content p a {color:#692469;} .content p a:hover {text-decoration:underline; color:#000;}
.content strong {font-weight: 500;}
.content sup {display:inline-block; font-size:50%; line-height: 100%; font-weight:300;vertical-align:text-top;}
.content h4 {font-size: 22px; color:#111; font-weight: 300; margin-bottom: 12px; }
.content li {line-height: 1.7;}

body, p, h1, h2, h3, nav, li, a {font-family:'Work Sans'; font-weight:200; line-height: 1.4;}
strong {font-weight: 400;}

.featuresBlock { background-color:#f3f3f3;}
.featureList {text-align:center;}
.featureList li { display:inline-block; width: 18%; margin-right: 2%; vertical-align:top;  margin-bottom: 40px;}
.featureList li:nth-child(5n) {margin-right: 0px;}
.featureList li span {width: 40%; padding-top: 38%; display:inline-block; background:#fbfbfb; margin-bottom: 10px; border-radius: 4px; position:relative; transition:all 0.5s ease-in-out;}
.featureList li span img {position:absolute; width: 60%; height: 60%; top: 20%; left: 20%;}
.featureList li p {font-size: 0.75em; }
.featureList li p strong {font-size: 1.2em; margin-bottom: 6px; display:inline-block; color:#222}
.featureList li i {position:absolute; width: 100%; left: 0px; top: 15px; font-size: 50px; color:#999;}
.featureList li:hover span {transform: perspective( 600px ) rotatex( 15deg ) scale(1.4) translateY(-10px); box-shadow: 0px 20px 20px rgba(0,0,0,0.25); }

@media (max-width:980px) and (min-width: 640px){
.featureList li { display:inline-block; width: 24%; margin-right: 1%; vertical-align:top;  margin-bottom: 25px;}
.featureList li i {top: 15%; font-size: 44px;}
}
@media (max-width:640px) and (min-width:320px){
.featureList li { display:inline-block; width: 42%; margin-right: 2%; vertical-align:top;  margin-bottom: 35px;}
.featureList li i {top: 15%; font-size: 50px;}
}
@media (max-width:480px){
.featureList li { display:inline-block; width: 42%; margin-right: 2%; vertical-align:top;  margin-bottom: 35px;}
.featureList li p {font-size: 0.5em; }
.featureList li p strong  {font-size: 1.4em; }
.featureList li i {top: 15%; font-size: 32px;}
}




.contentHeader {padding: 50px; text-align:center;}
.contentHeader h2 {font-size: 48px; color:#444;}
.contentHeader h3 {font-size: 32px; color:#444;}
.contentHeader p {font-weight: 600 !important; font-size: 16px; color:#666; margin-bottom: 15px;}
.contentHeader p strong {font-weight: 200;}

@media (max-width:980px) and (min-width: 640px){
.contentHeader {padding: 25px;}
.contentHeader h2 {font-size: 42px;}
.contentHeader h3 {font-size: 28px;}
.contentHeader p {font-size: 14px;}
.container {padding: 20px 10px;}
}
@media (max-width:640px){
.contentHeader {padding: 15px;}
.contentHeader h2 {font-size: 32px; line-height: 38px; margin-bottom: 16px;}
.contentHeader h3 {font-size: 22px;}
.contentHeader p {font-size: 13px;}
.container {padding: 15px 5px;}
}




.FeaturesImgEdit {text-align:center;}
.FeaturesImgEdit li {display:inline-block; width: 9%; margin: 0% 1%; text-align:center;  border-radius: 4px; position:relative; background:#222; border-bottom:1px solid #111; border-top:1px solid #333;}
.FeaturesImgEdit li span {display:inline-block; width: 80%; margin-left: 10%; padding-top: 70%;}
.FeaturesImgEdit li span img {width: 60%; font-size: 0px; position:absolute; left: 20%; top: 10%;}
.FeaturesImgEdit li p {color:#fff; padding: 5px 0px 10px 0px; font-size: 12px;}


@media (max-width:768px) and (min-width: 480px){
.FeaturesImgEdit li {width: 20%; margin-bottom: 20px;}
}
@media (max-width:480px){
.FeaturesImgEdit li {width: 30%; margin-bottom: 15px;}
.subNote {padding: 40px 0px; font-size: 10px !important; text-align:center;}
}


.subNote {padding: 40px 0px; font-size: 12px; text-align:center;}

.demoSites { position:relative; color:#fff; overflow:hidden;} .demoSites h2, .demoSites p {color:#fff;}
#demoSites {font-size: 0px; text-align:center;}
#demoSites li {position:relative; cursor:pointer; border-radius: 6px; box-shadow: 0px 0px 10px rgba(0,0,0,0.05); display:inline-block; width: 21%; z-index:1; margin-right: 5%; transform: scale(1.0); -webkit-transform: scale(1.0); height: 130px; margin-bottom: 40px; vertical-align:top; transition:all 0.25s ease-out;}
#demoSites li>div {position:absolute; width: 100%; height: 100%; border-radius: 6px;  top:0px; left:0px;
background: #000000;
background: -moz-linear-gradient(top,  #000000 0%, #222222 75%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(75%,#222222));
background: -webkit-linear-gradient(top,  #000000 0%,#222222 75%);
background: -o-linear-gradient(top,  #000000 0%,#222222 75%); 
background: -ms-linear-gradient(top,  #000000 0%,#222222 75%); 
background: linear-gradient(to bottom,  #000000 0%,#222222 75%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 ); 
} 
@media (min-width:980px){
#demoSites li:nth-child(4n) {margin-right: 0px !important; z-index:10;}
}
#demoSites li div {box-shadow:0px 0px 10px rgba(0,0,0,0); opacity:1;  transition:all 0.25s ease-out;}
#demoSites li div:hover {box-shadow:20px 10px 200px rgba(0,0,0,0.3); }
#demoSites li:hover {-webkit-transform:scale(1.05); transform:scale(1.05); box-shadow:0px 0px 10px rgba(0,0,0,0.7); border-radius: 6px;}
#demoSites li img {width: 80%; margin-top: 30px; position:absolute; left: 10%;  transition:all 1s ease-out;}
#demoSites li iframe {position:absolute; width: 100%; left: 0px; bottom: 15px; height: 30px; overflow:hidden; position:absolute; z-index:100;}
#demoSites li .goDemo {width: 70%; margin-top: 10px; left: 15%;}
#demoSites li .spin {position:absolute; margin-left: -15px; left: 50%; bottom:15px; width: 30px; height: 30px; z-index:1; }
.demoSites .subNote {padding: 0px 0px 40px 0px !important; }

@media (max-width:980px) and (min-width: 640px){
#demoSites li {width: 25%; margin-bottom: 20px;}
}
@media (max-width:640px) and (min-width: 480px){
#demoSites {text-align:center;}
#demoSites li {width: 45%; margin:0px 2% 15px 2%;}
}
@media (max-width:480px){
#demoSites {text-align:center;}
#demoSites li {width: 70%; margin:0px 0px 15px 0px; height: 115px;}
}



.browsers {background:#eee; box-shadow:inset 0px -20px 100px #ccc; }
.browserLogos {text-align:center; display:block; margin-bottom:-20px;}
.browserLogos img {width: 120px; margin:0px 10px; transition:all 1s ease-in-out;}
.browserLogos {transform:perspective(600px); -webkit-transform:perspective(600px)}
.browserLogos img:hover {transform:rotatey(360deg) perspective( 600px ); -webkit-transform:rotatey(360deg) perspective( 600px );}
.browserLogos .mobile {width: 275px; height: 100px; margin:10px 0px 10px -25px; transition:all 1s ease-in-out;}
.browserLogos .mobile:hover  {transform:rotatey(0deg) rotateX(360deg) perspective( 600px ); -webkit-transform:rotatey(0deg) rotateX(360deg) perspective( 600px );}

@media (max-width:980px) and (min-width: 640px){
.browserLogos img {width: 70px; margin:0px 5px;}
.browserLogos .mobile {width: 137px; height:50px; margin-left: -10px;}
}
@media (max-width:640px){
.browserLogos img {width: 60px; margin:0px 2px;}
.browserLogos .mobile {width: 137px; height:50px; margin-left: -10px;}
}


/*INTRO*/

.ninjaAnim {background:#000; width:100%; position:relative;}
#ninjaWrap {width: 600px; height: 250px; position:absolute; bottom:40px; right: 40px; transform:scale(0.5); -webkit-transform:scale(0.5); transform-origin:100% 100%; -webkit-transform-origin:100% 100%;}
#ninja {width: 2000px;height: 2000px;margin-left:-1190px;margin-top:-1000px;position:absolute; opacity:0;right: -783px;top: -21px;}
#ninjaBlink { position:absolute; top: 990px;}
#ninjaBlink div {width: 184px; height: 184px; background:#fff; border-radius:184px;  position:absolute; }
#ninjaBlink .blinkL {left: 686px;}
#ninjaBlink .blinkR {left: 1154px;}
#ninjaBlink div span  {width: 176px; height: 176px; background:#000; border-radius:100%; position:absolute; margin: 4px; 
transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out;}
.ninjaBlink {height: 12px !important; margin-top: 110px !important;} 
#ninjaSpin {width: 100%; height: 600px; position:absolute; font-family:optima; font-weight:100; color:#fff; margin:0px auto;}
#ninjaVideo {width: 1200px; height: 600px; position:absolute; top: 0; object-fit:cover;}
#ninjaVideo1 {width: 1200px;  height: 600px; position:absolute; top: -0px; object-fit:cover;}
#ninjaSpin  h1 {position: absolute;font-family:'futura-pt',sans-serif; letter-spacing:-10px; left: 260px; top: 0px; font-size: 200px;}
#ninjaSpin  h2 {position: absolute; font-family:'futura-pt',sans-serif; letter-spacing:-1px; left: 420px; top: 210px; font-size: 36px;}
#ninjaBraceL {position:absolute; top: -212px; left: 130px; opacity:0;}
#ninjaBraceL:before {font-size:400px; content:"{"; color:#fff; font-family:'futura-pt',sans-serif;  }
#ninjaBraceR {position:absolute; top: -212px; left: 440px; opacity:0;}
#ninjaBraceR:before {font-size:400px; content:"}"; color:#fff; font-family:'futura-pt',sans-serif;  }

#ninja3D {width: 100%; height: 600px; position:relative; background:#000; overflow:hidden;
background: #1e2333; 
background: -moz-linear-gradient(top,  #1e2333 0%, #03040a 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e2333), color-stop(100%,#03040a));
background: -webkit-linear-gradient(top,  #1e2333 0%,#03040a 100%); 
background: -o-linear-gradient(top,  #1e2333 0%,#03040a 100%);
background: -ms-linear-gradient(top,  #1e2333 0%,#03040a 100%); 
background: linear-gradient(to bottom,  #1e2333 0%,#03040a 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e2333', endColorstr='#03040a',GradientType=0 );

}
#ninjaC {width: 1px; height: 1px; position:absolute; left: 50%; top:50%;}
.icon3D, .icon3Do {text-align:center; position:absolute; width: 100px; height: 100px;}
.icon3D i, .icon3Do i {display:block;  background:#111; position:absolute; with: 100%; height: 100%; font-size: 60px; padding:20px 15px 10px 15px; border-radius: 10px;  color:#444; text-align:center;  opacity:0; box-shadow:0 0 0 rgba(255,255,255,0);}
.iconBar {width: 800px; height: 30px; display:block; background:rgba(255,255,255,0.05); position:absolute; top: 50px; left: 50px; border-radius: 50px; box-shadow:inset 0 0 20px rgba(0,0,0,0.5); opacity:0;}
.iconDot {width: 20px; height: 20px; background:#fff; box-shadow:0px 0px 50px #fff; position:absolute; border-radius:20px;} 
.registerThanks {display:none;}


/* CONTACT MODULE*/
.contactForm  {width: 960px; margin:0 auto; position:relative; padding-bottom: 20px;}
.contactForm  label {display:inline-block; width: 90px; font-size: 14px; color:#999; font-weight: 300; vertical-align:top; padding-top: 10px;}
.contactForm  div {width: 50%; padding: 5%; display:inline-block; vertical-align:top; padding: 0px;}
.contactForm  div input, .contactForm  div textarea {width: 320px; margin-bottom: 20px; font-size: 15px; border: 2px solid #ccc; padding: 4px 20px; border-radius: 6px; outline:0;
transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out;
}
.contactForm  div textarea {height: 80px; font-size: 12px;}
.contactForm div input:hover {background:#eee;}
.contactForm div input:focus, .contactForm div textarea:focus {color:#fff; background:#09f;}
.contactForm .labwide {width: 600px; margin-left: 50px;}
.contactForm .labwide input {margin-right: 20px; position:relative; top:-2px;}
#rgeSubmit {position:absolute; bottom: 40px;right: 70px; width: 320px; background:#000; padding: 5px 20px; color:#fff; border:none; border-radius:6px; font-size: 16px;
transition:all 0.3s ease-in-out; -webkit-transition:all 0.1s ease-in-out; -moz-transition:all 0.1s ease-in-out; -o-transition:all 0.1s ease-in-out; -ms-transition:all 0.1s ease-in-out; outline:0;
}
#rgeSubmit:hover {background:#fff; border:1px solid #000; color:#000;}
#rgeSubmit:active {background:#000; color:#fff;}

@media (max-width:960px){ 
.contactForm  {width:80%; margin-left: 10%; padding:0px 20px 60px 20px;}
.contactForm div {width: 100%;}
.contactForm div label {width: 25%;}
.contactForm div input, .contactForm div textarea {width:75%;}
#rgeSubmit {width: 80%; left: 10%;}
.contactForm .labwide {width: 100%; text-align:center; margin-left: 0px;}
}
@media (max-width:480px){ 
.contactForm {width: 90%; padding: 0px; }
.contactForm div label {display:none;} .contactForm div input, .contactForm div textarea {width:90%; margin-bottom: 10px; font-size: 14px;}
#rgeSubmit {width: 90%; left: 10%; position:static;}
}


/*VIDEO BG CONTAINER */
#video_background, #video_background1 { position: absolute;top: 0; left:0; min-width: 100%; width: 100%; z-index: -1; overflow: hidden; min-height: 100%; background-size:cover; background-position:center center;}
#video_background video, #video_background1 video {width: 100%; height: 100%;}
#video_background_inset {position:absolute;  min-width: 100%; min-height: 100%; width: 100%; height: 100%; z-index: -1; overflow: hidden;}

.patternOverlay {background:rgba(0,0,0,0.6) url(files/image/generic/dots1.png); position:absolute; top: 0; left: 0; width: 100%; height: 100%;}


.quote {position:absolute; z-index:99999; padding: 10px; width:40%;}
.quote span {color:#fff; font-weight:100; opacity:0;}
.quote_tr {top:50px; right: 20px; -moz-transform-origin:'100% 0%'; -webkit-transform-origin:'100% 0%'; transform-origin:'100% 0%'; }
.quote_br {bottom:50px; right: 205px;  -moz-transform-origin:'100% 100%'; -webkit-transform-origin:'100% 100%'; transform-origin:'100% 100%';}
.quote_c {bottom:40%; left: 50%;  -moz-transform-origin:'50% 50%'; -webkit-transform-origin:'50% 50%'; transform-origin:'50% 50%'; }
.quote_c span {margin-left: -100%;}
.quote_bl {bottom:50px; left: 20px;  -moz-transform-origin:'0% 100%'; -webkit-transform-origin:'0% 100%'; transform-origin:'0% 100%';}
.quote_tl {top:50px; left: 20px; -moz-transform-origin:'0% 0%'; -webkit-transform-origin:'0% 0%';  transform-origin:'0% 0%';}
.quote_s {display:block; text-align:center; font-size: 18px; position:relative; line-height:1.4;}
.quote_m {display:block; text-align:center; font-size: 26px; position:relative; line-height:1.2;}
.quote_l {display:block; text-align:center; font-size: 40px; position:relative; line-height:1.2;}


@media (max-width:480px){
.quote {width: 60%; transform:scale(0.8);}
.quote_tl {top: 40px;}
.quote_bl, .quote_br , .quote_c {bottom: 52% !important;}  
 #ninjaWrap {right:auto; left: 20%;}
 .rgeTextLogo {margin-top: -20px !important;}
}
@media (min-width:480px) and (max-width:992px){
 .rgeTextLogo {margin-top: -25px !important;}
}
@media (max-width:360px){
 #ninjaWrap {right:auto; left: 0%;}
}

@media (max-width:480px){
#ninja3D {width:200% !important; -moz-transform:scale(0.5); -webkit-transform:scale(0.5); transform-origin:50% 0%; margin-left: -50%; margin-bottom:-300px;}
}


.featureSlider {height: 400px; position:relative; width: 100%; overflow:hidden;}
.featureSlider .container {height: 100%;}
.coverPanelLeft {position:absolute; left:-2000px; width: 2000px; height: 100%; background:url(files/image/rgeGeneric/rgeBurDot.png); z-index:100;}
.coverPanelRight {position:absolute; right:-2000px; width: 2000px; height: 100%; background:url(files/image/rgeGeneric/rgeBurDot.png); z-index:100;}
#coverFeatures {position:absolute; left:0; right:0; top:0; bottom:0; font-size: 0px; white-space:nowrap;}
#coverFeatures li {width: 100%; height: 100%; display:inline-block; background-size:cover; position:relative;}
#coverFeatures li:nth-child(1) {margin-left: -100%;}
.f1 {background-image:url(files/image/rgeSliders/colour.jpg);}
.f3 {background-image:url(files/image/rgeSliders/source.jpg);}
.f2 {background-image:url(files/image/rgeSliders/mobile.jpg);}
#coverFeatures li h2 {display:inline-block; background:rgba(0,0,0,0.3); width: 100%; font-size: 32px; color:#fff; letter-spacing: 3px; position:absolute; bottom: 0px; padding: 25px 80px;}
#coverFeatures li h2:before {position:absolute; font-family:FontAwesome; content:"\f101"; left: 35px; font-size: 48px; top:12px;}
#coverFeatures li h2 span {display:block; font-size: 24px; color:#fff; font-weight: 200;}

.articleLeft {background:#fff; padding:90px 20px; position:relative; width: 100%;}
.articleLeft ul {padding-right: 40%;}
.articleRight {background:#000; padding:50px; position:relative; width: 100%;}
.articleRight ul {padding-left: 40%;} .articleRight ul li, .articleRight ul h4 {color:#ddd;}
.showEditIcon {background:#000; padding: 4px 3px 1px 3px; font-size: 11px; border-radius: 4px; color:rgb(0,255,0);}
.articleLeft li, .articleRight li {margin-bottom: 10px; color:#555;}

.articleLeft figure {position:absolute; right: 0%; width: 40%; height: 90%; top: 10%; background-size:contain; background-repeat:no-repeat;}
.articleRight figure {position:absolute; left: 0%; width: 40%; height: 90%; top: 10%; background-size:contain; background-repeat:no-repeat;}

.videoCaption {text-align:center; font-size: 16px; padding: 5px 5px 10px 5px;}


/*revised logo*/
.rgeTextLogo {font-family: "futura-pt",sans-serif; font-size: 60px; letter-spacing:-2px; color:#000;display:inline-block; margin-top: -5px;}
.rgeTextLogo .rgeBracket {font-size: 48px; margin:0px -5px;}
.rgeTextLogo .rgeGrey {color:#aaa; display:inline-block; padding-left: 4px;}


.popImage {cursor:pointer; box-shadow:0px 0px 2px #ddd;  transition:all 0.3s ease-in-out; -moz- transition:all 0.3s ease-in-out; -webkit- transition:all 0.3s ease-in-out; -ms- transition:all 0.3s ease-in-out; transform:scale(0.97); -moz-transform:scale(0.97); -webkit-transform:scale(0.97);}
.popImage:hover {transform:scale(1.05); box-shadow:5px 1px 10px #ccc; }
.popImageOpen {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.9);z-index:9999;padding: 5%;}
.popImageOpen i {position:absolute; cursor:pointer; top:2%; right: 2%; font-size: 32px; color:#fff;}
.popImageOpen i:hover {opacity:0.8);}
.popImageFrame {max-width: 1000px;max-height: 837px;margin: 0px auto;/* padding-top: 80%; */background-size: contain;background-repeat:no-repeat;height: 100%;background-position: center;}
.popImageOpen p {color:#fff !important; text-align:center; position:absolute; bottom: 0px; background:rgba(0,0,0,0.5); padding: 20px; left: 0px; right: 0px;}

.dButton {box-shadow:0px 0px 0px rgba(0,0,0,0.8); color:#fff !important; font-size:24px; color:rgb(255, 255, 255); font-weight:600; background-color:rgb(0, 153, 255); display:inline-block; border-radius:4px; margin-top:20px; margin-bottom:20px; padding-top:5px; padding-right:20px; padding-bottom:5px; padding-left:20px; 
 transition:all 0.3s ease-in-out; -moz- transition:all 0.3s ease-in-out; -webkit- transition:all 0.3s ease-in-out; -ms- transition:all 0.3s ease-in-out; transform:scale(0.97); -moz-transform:scale(0.97); -webkit-transform:scale(0.97);}
.dButton:hover {background:#000; box-shadow:10px 10px 20px rgba(0,0,0,0.2); transform:scale(1.1); -moz-transform:scale(1.1); -webkit-transform:scale(1.1); }

#dotNinja {text-align:right; padding-top: 230px; padding-right: 50px; display:none;} 


.content .card {text-align: center; box-shadow:0px 0px 4px #eee; padding: 15px; margin: 0px 15px; border: 1px solid rgb(238, 238, 238); border-radius: 2px; background: rgb(245, 245, 245);}
.content .downloadBtn {background:#09f; display:inline-block; color:#fff !important; cursor:pointer; padding: 4px 12px; border:1px solid rgba(0,0,0,0.05); border-radius:3px; margin: 10px 0px; font-size: 18px; box-shadow:inset 0px -5px 20px rgba(0,0,0,0.2);}
.content .downloadBtn:hover {box-shadow:0px 4px 10px rgba(0,0,0,0.2); background:#07d; color:#fff !important; text-decoration:none; text-shadow:0px 1px 1px rgba(0,0,0,0.2);}

.configBox label {display:inline-block; width:20%; min-width: 100px; font-size: 10px; vertical-align:top; padding-top: 4px;}
.configBox span {display:inline-block; width:80%; font-size:12px; font-weight:300; margin-bottom: 5px;}

.content code, .content strong, .configBox em, .content em {user-select: text !important;  -moz-user-select: text !important;  -webkit-user-select: text !important; }


.panel {background:#f5f5f5; border:3px solid #ddd; border-radius: 8px; box-shadow:0px 0px 3px #eee;}
.panel .panelHeading {margin:0px; text-align:center; font-weight:400; border-radius: 6px 6px 0px 0px; border-bottom: 1px solid #ddd; background:#09f; color:#fff; padding: 5px 0px;}
.panel .panelSubHeading {margin:0px; text-align:center; border-bottom: 1px solid #ddd; background:#222; color:#fff; padding: 5px 0px;}
.panel .priceInfo {background:#fff; margin-top: 0px; display:block;}
.panel .priceInfo li {padding: 4px 24px 4px 44px; font-size: 15px; line-height: 1.5;  border-bottom: 1px solid #f5f5f5; position:relative;}
.panel .priceInfo li:before {font-family:fontAwesome; content:"\f14a"; position:absolute; left:16px; font-size: 18px; color:#9c0; }
.panel .priceInfo .disable:before{ color:#ddd; content:"\f00d";}

.panel .pricingInfo {background:#f5f5f5; margin-top: 0px; display:block;}
.panel .pricingInfo li {padding: 4px 24px 4px 24px; text-align:center; font-size: 16px; line-height: 1.5;  border-bottom: 1px solid #ddd; position:relative;}
.panelPrice {background:#fff; color:#09f; font-size: 36px !important; font-weight: 600;}
.panelPrice sub {font-size: 70%; font-family:inherit; font-weight:inherit;}
.panelPrice sup {font-size: 50%; font-family:inherit; font-weight:inherit; line-height:1.4; }
.panelExchange {font-size: 12px !important; color:#222; padding: 20px 0px !important;}
.panelNotes {font-size: 16px !important;}
.panelPurchase {text-align:center;padding: 8px; font-size: 28px !Important; text-align:center !important; display:block; margin: 10px; background:#f90; border-radius: 10px; color:#fff !important; }
.panelPurchase:hover {background:#000; color:#fff !important;}
.panel a {color:#fff !important; cursor:pointer;}
.panel a:hover {color:#fff !important;}
.content ol li {list-style-type: decimal; padding-left: 10px;}


.story h1 {font-weight: 400;}
.story p, .story p a {font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif; color:#000; font-weight: 300 !important; font-size: 20px !important; line-height:1.5 !important; margin-bottom: 20px !important;}

@media (max-width:1200px){
.siteHeader .freeTrial {position:fixed; top: 90px; z-index:999; right: 15px;}

}
@media (min-width:1070px){
.ftinjecta {display:none !important;}
}
@media (max-width:1070px){
.ftinject {margin-top: 30px;}
.ftinjecta {text-align:center !important; border-bottom: 2px solid rgba(0,0,0,0.2); box-shadow:inset 0px 5px 10px rgba(0,0,0,0.2);}    
}

.storyTable {border:1px solid #ddd;}
.storyTable td {border:1px solid #ddd; padding:4px 8px; color:#555;}
.storyTable th {font-weight: bold; font-size: 14px; padding: 8px;}
.storyTable tr td:nth-child(2),.storyTable tr td:nth-child(3) {text-align:left; padding-left: 30px;}


.newsPanel {background:#fff; border:1px solid #eee; border-radius:3px; padding: 15px; margin:20px 0px;}
.newsPanel a {color:inherit;}
.newsPanel .newsNanoImage,.newsPanel iframe {width: 100%; height: 220px !important; padding:10px; background-size:cover; background-color:#f5f5f5; background-repeat:no-repeat; background-position:50% 50%;}
.newsPanel .newsTitle {margin:15px 0px 10px 0px;  font-size: 22px; color:#000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.newsPanel p {overflow:hidden; width: 100%; height: 36px; font-size: 14px; color:#444; line-height: 1.4;}
.newsCatName {font-size: 60px; color:#692469; font-weight: 100; margin-bottom: 20px; text-align:center;}

@media (max-width:767px){
    .hideD {display:inline-block;}  .hideM {display:none;}  
}
@media (min-width:768px){
    .hideM {display:inline-block;}  .hideD {display:none;}  
}