html, body  { width:100%;height:100%;padding: 0px; margin: 0px; background-color: #FFFFFF; font-family: 'Frutiger Next W01', Helvetica, Arial, sans-serif; font-size:13px; font-weight:300;color:#555; position:relative;}
body { -webkit-font-smoothing: antialiased;}
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.clear {clear:both;}
.stopscroll {overflow:hidden;}
p  {margin: 0px;padding-bottom: 12px;color: #FFFFFF;}
a {color:#999999;}
a:hover {color:#cbcbcb;text-decoration:underline;}
.header { width: 100%; height: 97px; position:fixed; top:0px;left:0px;background: #FFF; z-index:9997;border-bottom: 1px solid #cacaca;}
.headerfix { width: 100%; height: 97px; position: relative;background: #FFF; }
.header .formitlogo {position: absolute; left: 3.5%; top: 31px; z-index: 1; width: 255px;}
.formitlogo img {width: 100%;}

.header-img { width: 100%; height:0;padding-bottom:38%;position:relative;background:#FFF;box-sizing: border-box;}
.header-img .tint {width:100%;height:100%;position: absolute;background:rgba(10,100,212,0.5);}
.scrolldown {position: absolute;bottom:25px;width:33px;height:33px;left:50%;margin-left: -16px;}
.text-card-wrap {width:90%;height:auto;z-index:3;position:absolute;top:25%;left:6%;text-align: left;}
.text-card-wrap h1 {font-size:57px;line-height: 1em;font-size:5.5vw;color:#FFF;padding:0 0 3.5% 0;margin:0;text-align: left;font-weight: 300;}
.text-card-wrap a {width:12%;min-width:143px;height:30px;background:#FFF;border-radius: 15px;-webkit-border-radius: 15px;display:inline-block;border:none;position: relative;margin-right:1.2%;}
.text-card-wrap a:hover {background:#1155aa;border:none;}
.text-card-wrap a .lozengetxt {text-align: center;font-weight: 500;color:#1155aa;top: 8px;position: absolute;width:100%;}
.text-card-wrap a:hover .lozengetxt {color:#FFF;}
.text-card-wrap a:hover .lozengetxt .lozengearrow {background-position: -7px;}
.text-card {background:#a6b6c4;opacity:0.9;padding:3% 5% 3% 5%;z-index:4;position:relative;text-align: right;}
.tc-title {color:#FFF;font-weight: 100;font-size:5vw;}
.container {position:relative;top:0;left:0;width:100%;height:100%;overflow-x: hidden;}
#scroller {position:relative;overflow:visible;}
.pages {position:relative;top:0px;}

#hpmenu { position:relative; float:right; margin-right: 30px; width:auto;height:auto;}
.menuitem {float:left;cursor:pointer;width:auto;height:13px;line-height:13px;margin:44px 22px 0 0;position:relative;}
.menuitem a {color:#555;text-decoration: none;}
.menuitem:hover, .menuitem a:hover {color:#1155AA;text-decoration: none;}
.learning .arrow {width:8px;height:6px;display:inline-block;overflow: hidden;background:url(../images/triangle.png);margin:3px 0 0 6px;vertical-align: top;}
.menuitem .learning.open {color:#1155aa;}
.arrow.hovered {background-position: -8px;} 
.arrow.open {background-position: -16px;} 
.menuitem.menuactive {border:1px solid #DDDDDD;}
.menuitem.menuactive:hover .menuitemtxt {-webkit-animation: none;-o-animation:none;animation:none;}
.menuitemshade {position:absolute;top:0px;left:0px;z-index:9;width:88px;height:88px;display:none;}
.menuitem.last {margin:44px 0 0 0;}
.dropdown {border-radius: 6px;-webkit-border-radius: 6px;background:rgba(255,255,255,0.9);width:auto;position:absolute;top:30px;left:-60%;display:none;}
.dditem {margin:10px 26px 0 26px;padding-bottom:10px;border-bottom: 1px solid #e3e3e3;width:100px;line-height: 13px;text-align: center;}
.dditem.last {border:none;}
.dditem a {color:#555;text-decoration: none;}
.dditem a:hover {color:#1155aa;}
.mmenuicon {margin-top:38px;width:25px;height:25px;position:absolute;right:2%;cursor:pointer;display:none;background: url(../images/mmenuicon.png) no-repeat;background-size: 50px 25px;z-index: 9996;}
.mmenu {width:100%;height:auto;position:absolute;top:97px;left:0px;display:none;z-index:9999;}
.mmenuitem {color:#555;background:#FFF;font-size:18px;line-height:18px;border-bottom:1px solid #e5e5e5;padding:15px 0 15px 26px;cursor:pointer;}
.mmenuitem.sub {color:#8b8b8b;background:#e5e5e5;border-bottom:1px solid #f8f8f8;padding:15px 0 15px 26px;cursor:pointer;}
.mmenuitem.last {border:none;}
.mmenuitem.manage {color:#1155aa;}
.mmenuitem a {color:#555;text-decoration: none;}
.launcher {position: relative;float:right;margin: 34px 0 0 0;width:143px;font-size:12px;line-height: 12px;text-align: center;}
.launcher a {color:#555;font-size: 12px;text-align: center;text-decoration: none;border-bottom: 1px dashed #999999;}
.launcher a:hover {color:#1155aa;border-bottom: 1px dashed #1155aa;}
.lozenge {position: relative;margin-bottom: 10px;width:143px;height:30px;}
.lozenge a {width:143px;height:30px;background:#1155aa;border-radius: 15px;-webkit-border-radius: 15px;display:block;border:none;}
.lozenge a:hover {background:#aaaaaa;border:none;}
.lozenge a:hover .lozengearrow {background-position: -7px;}
.lozengetxt {text-align: center;font-weight: 700;color:#FFF;top: 9px;position: absolute;width:100%;}
.lozengearrow {width:7px;height:9px;overflow: hidden;display:inline-block;background:url(../images/rightarrowblue.png) no-repeat;background-size:14px 9px;}
.lozengearrow.gray {background:url(../images/rightarrowgray.png) no-repeat;background-size:14px 9px;}
.a360 {position: relative;float: right;margin:44px 3.5% 0 30px;font-size:14px;line-height: 14px;}
.a360 a {text-decoration: none;color:#555;}
.a360 a:hover {color:#1155AA;}
.active {background-position: -25px;}
.activem, .actives {font-weight: 700;}
.disclaim {position: absolute;bottom:10px;left:10px;color:#666;font-size:13px;line-height:13px;z-index: 10;}

.storycontain {width:100%;height:100%;position:relative;background: #FFF;top:0;overflow:hidden;}
.storybox {width:100%;height:100vh;position:relative;overflow:hidden;}
.storypanel {width:100%;height:100vh;position: absolute;overflow:hidden;}
.panel1 {background:url(../images/story1.jpg) center bottom;background-size: cover;position:absolute;top:0;}
.panel2 {background:url(../images/story2.jpg) left top;background-size: cover;top:100vh;}
.panel3 {background:#f1f1f1;top:100vh;}
.storypanel h1 {font-size:47px;font-size:3.5vw;font-weight:300;line-height: 1em;width:75%;color:#444;margin:0 auto;padding:20vh 0 0 0;text-align: center;position:relative;}
.storypanel h1.below {width:50%;text-align: left;position:absolute;left:0;top:0;margin:0 0 0 5%;}
.storypanel h1.left {width:50%;text-align: left;position:absolute;left:-62.5%;top:0;margin:0 0 0 10%;}
.storypanel h1.left.visible {position:absolute;left:0;top:0;margin:0 0 0 5%;}
.storypanel h1.story3 {color:#1155aa;width:60%;}
.storypanel h1.story3.story4 {position:absolute;top:0;left:50%;width:55%;margin:0 0 0 -27.5%;}
.ipad {width:65vh;position:absolute;right:0;bottom:-10px;z-index:9;}
.ipad img {width:100%;}
.pc {width:70vh;position:absolute;left:50%;bottom:5%;margin-left:-35vh;z-index:9;}
.pc img {width:100%;}
.pc .finalss {width:100%;position: absolute;top:0;left:0;opacity:0;}
.pc .finalss img {width:100%;}
.awards {width:18vh;position: absolute;bottom:20%;z-index: 10;opacity:0;}
.awards.left {left:8%;}
.awards.right {right:8%;}
.awards img {width: 100%;}
.dots {width:11px;height:168px;position:absolute;left:15px;top:40%;z-index: 11;}
.dot {position: relative;width:11px;height:11px;overflow: hidden;margin-bottom: 13px;background: url(../images/dot.png) left top;}

.lower-wrap {position:absolute;top:100%;height:auto;}

.procompare {width:100%;height:auto;background:#FFF;padding-top:76px;}
.procompare h1 {font-size:47px;font-size:4vw;font-weight:300;line-height: 1em;color:#1155aa;padding:0 0 97px 0;text-align: center;margin:0;}
.procompare .block {width:50%;float:left;font-size:23px;line-height: 29px;color:#777;}
.procompare .block p {padding: 0 0 15px 0;color:#777;}
.procompare .block .block1 {margin:0 0 83px 0;float:right;}
.procompare .block .block2 {margin:0 0 83px 0;}
img.productname {margin-bottom: 48px;}
img.pro {padding-left: 6vw;}
.rborder {padding-right: 5vw}
.lborder {border-left: 1px dashed #999;padding-left: 6vw}
.procompare .lozenge, .procompare .lozenge a {width:205px;height:32px;border-radius:16px; -webkit-border-radius: 16px; font-size:14px;line-height:14px;margin-bottom: 14px;}
.lozenge1 {margin-top:28px;}
p.available {margin-top:27px;font-size: 16px;line-height:18px;}
p.available.last {padding:0;}
.procompare .block p.blue {color:#1155aa;font-weight: 500;}
.price {margin:20px 0 38px 0;}

.casestudy {width:100%;height:auto;background:#FFF;position: relative;}
.casestudy .block {width:50%;float:left;font-size:23px;line-height: 29px;color:#777;position: relative;}
.casestudy img {width:100%;display:block;}
.casestudy .words {top:35%;left:11%;color:#333;font-size:3vw;line-height:1em;position: absolute;width:50%;}
.casestudy .words.words2 {left:8%;}
.casestudy .words p {padding:0;margin:0 0 33px 0;color:#333;}
.casestudy .lozenge, .casestudy .lozenge a {width:126px;height:32px;border-radius:16px; -webkit-border-radius: 16px; font-size:13px;line-height:13px;margin-bottom: 14px;color:#333;background:transparent;}
.casestudy .lozenge a {border:2px solid #333;}
.casestudy .lozenge a:hover {background:#333;}
.casestudy .lozengetxt {color:#333;top:10px;}
.casestudy .lozenge a:hover .lozengetxt {color:#FFF;}
.casestudy img.normal {width:7px;display:inline;}

.galleryintro {background:#e3e3e3;width:100%;height:75px;padding:27px 3.7% 31px 3.7%;z-index: 9;position: relative;}
.galleryintro .head {font-size:25px;line-height: 25px;color:#1155aa;float:left;margin-right: 29px;}
.galleryintro .button {font-size:13px;line-height: 13px;margin: 5px 13px 0 0;float:left;}
.galleryintro .button a {background:#e3e3e3;color:#555;text-decoration: none;padding:5px 10px 3px 10px;border-radius:12px; -webkit-border-radius: 12px;}
.galleryintro .button a:hover {background:#FFF;color:#1155aa;}
.galleryintro .button a.active {background:#FFF;color:#1155aa;}
.galleryintro .social {float:right;}
.galleryintro .social a {margin-left:22px;}
.galleryintro .social a:hover {opacity:0.7;}
.galleryintro .menuitem {display:none;}

.gallerycontain {width:100%;height:280px;overflow: hidden;position:relative;z-index: 8;}
.gallerycontain .arrowl {width:50px;height:50;position: absolute;top:88px;left:10px;z-index:10;cursor: pointer;display:none;}
.gallerycontain .arrowr {width:50px;height:50;position: absolute;top:88px;right:10px;z-index: 10;cursor: pointer;}
.galleryscroller {width:4800px;height:280px;position:absolute;top:0;left:0;}
.gallery {width:auto;height:auto;position: relative;}
.galleryitem {width:300px;height:280px;float:left;position: relative;}
.galleryitem img {display:block;cursor: pointer;}
.galleryitem .galleryover {position:absolute;top:0;left:0;width:300px;height:228px;background:rgba(17,85,170,0.8);display:none;padding:57px 50px 20px 26px;font-size:15px;line-height: 19px;color:#FFF;}
.galleryover .firstline {font-size:23px;line-height: 23px;margin-bottom: 12px;text-transform: capitalize;}
.galleryover .gallerytxt {height:112px;width:224px;overflow:hidden;text-overflow: ellipsis;}
.galleryitem:hover .galleryover {display: block;}
.gallerybar {width:299px;height:52px;background: #ecece9;border-right: 1px solid #dadada;position:relative;}
.gallerybar .face {width:28px;height:28px;margin:12px 10px 0 14px;float:left;position:relative;}
.gallerybar .name {width:auto;height:13px;font-size:13px;line-height: 13px;color:#555;margin:19px 16px 0 0;position:relative;float:left;}
.gallerybar .name a {color:#555;text-decoration: none;border-bottom: 1px dashed #999;float:left;}
.gallerybar .icon {width:auto;margin:20px 10px 0 0;position:relative;float:left;font-size: 13px;line-height: 13px;color:#777;}
.gallerybar .icon img {display:inline;vertical-align: middle;}

.disclosure {width:100%;position: relative;background: #FFF;-webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);-moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);}
.disclosure .links {position: relative;float:left;padding:30px 0 28px 40px;font-size: 12px;line-height: 12px;color:#666;}
.disclosure .links a {color:#666;text-decoration: none;}
.disclosure .links a:hover {color:#333;}
.logo {position: relative;float:right;width:156px;height:26px;margin:26px 40px 0 0;}
.legal {width:100%;padding:35px 40px 50px 40px;font-size: 14px;line-height: 18px;color:#666;}

.lightbox {display: none;}
.vid-overlay, .form-overlay {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: #000;opacity: .60;filter: alpha(opacity = 60);zoom: 1;z-index: 9998}
.form-overlay {display:none;}
.horizon {position: fixed;top: 50%;left: 0;width: 100%;height: 1px;z-index: 9999;}
.modal-1 {margin: -328px auto 0 auto;position: relative;width:1104px;height:656px;position: relative;}
.modal-1 .outer {background:#FFF;position:relative;width:1104px;height:656px;position:relative;}
.modal-1 .outer .closemodal {display: block;outline: 0;border: 0;position: absolute;top:10px;right:10px;cursor: pointer;}
.modal-1 .inner {width:1024px;height:576px;left:40px;top:40px;position: relative;}
.modal-1 .hd {padding-bottom: 30px;}
iframe {background:#000;width:100%;height:100%;}
.vidthumb {cursor: pointer;}

@media only screen and (max-width : 1200px) {
.s1-inner {padding:5% 5% 5% 5%;}
.modal-1 {margin: -299px auto 0 auto;width:1000px;height:598px;}
.modal-1 .outer {width:1000px;height:598px;}
.modal-1 .inner {width:920px;height:518px;}
.awards {width:15vh;}
.awards.left {left:4%;}
.awards.right {right:4%;}
}

@media only screen and (max-width : 1023px), screen and (max-device-width : 1024px) and (orientation : portrait) {
	.header #hpmenu, #manage {display:none;}
	.launcher {position: relative;float:right;margin: 35px 0 0 0;}
	.a360 {margin:44px 60px 0 20px;}
	.mmenuicon {display: block;}
	.menuitem {margin-left: 0;margin-right: 2vw;width:18%;height:auto;}
	.menuitem.contact {margin-right: 0;}
	.menuitemtxt {width:100%;opacity:1}
	.menuitem:hover .menuitemtxt {-webkit-animation: none;-o-animation:none;animation:none;}
	.storypanel h1 {font-size:36px;font-size:5vw;}
	.storypanel h1.left, .storypanel h1.below {width:60%;}
	.storypanel h1.story3 {width:80%;}
	.casestudy .block {width:100%;}
	.casestudy .words {font-size:5vw;}
	.procompare h1 {padding:0 0 40px 0}
	.procompare .block {width:100%;}
	.procompare .block .block1 {margin:0 auto;float:none;width:420px;padding-bottom: 40px;border-bottom: 1px dashed #999999;}
	.procompare .block .block2 {margin:40px auto 83px auto;float:none;width:420px;}
	.rborder {padding-right: 0;}
	.lborder {border-left: none;padding-left: 0;}
	img.pro {padding-left: 0;}
	.modal-1 {margin: -215px auto 0 auto;width:700px;height:429px;}
	.modal-1 .outer {width:700px;height:429px;}
	.modal-1 .inner {width:620px;height:349px;}
}

@media only screen and (max-width : 860px) {
	.logo {float:left;margin:26px 0 0 40px;}
	.awards {display:none;}
}

@media only screen and (max-width : 767px) {
	.text-card-wrap h1 {font-size:30px;font-size:6.5vw;}
	.header-img {padding-bottom: 55%;}
	.storypanel h1 {font-size:30px;font-size:6vw;}
	.casestudy .block {width:100%;}
	.casestudy .words {font-size:5vw;}
	.modal-1 {margin: -100px auto 0 auto;width:320px;height:198px;}
	.modal-1 .outer {width:320px;height:198px;}
	.modal-1 .inner {width:280px;height:158px;top:20px;left:20px;}
	.modal-1 .outer .closemodal {top:5px;right:5px;}
	.galleryintro {height:150px;padding:26px 3.7% 20px 3.7%;}
	.galleryintro .head {font-size:32px;line-height: 32px;margin-right: 0;width:275px;float:none;margin-bottom: 20px;}
	.galleryintro .button {font-size:13px;line-height: 13px;margin: 5px 13px 0 0;float:left;}
	.galleryintro .button a {background:#e3e3e3;color:#555;text-decoration: none;padding:5px 10px 3px 10px;border-radius:12px; -webkit-border-radius: 12px;}
	.galleryintro .button a:hover {background:#FFF;color:#1155aa;}
	.galleryintro .button a.active {background:#FFF;color:#1155aa;}
	.galleryintro .social {float:right;}
	.galleryintro .social a {margin-left:22px;}
	.galleryintro .social a:hover {opacity:0.7;}	
	.launcher, .launcher .lozenge {width:80px;}
	.launcher .lozenge a {width:80px;}
	.launcher {margin: 35px 0 0 0;}
}

@media only screen and (max-width : 568px) {
	.text-card-wrap {left:4%;}
	.text-card-wrap h1 {font-size:7.5vw;}
	#itslogo {left:50%;margin-left: -130px;}
	.menuitemtxt {font-size:13px;line-height:13px;}
	.menuitem {margin-right: 3vw;margin-top:3vw;width:30%;height:auto;}
	h1 {width:90%;font-size: 10vw;line-height: 10vw;}
	.header-img {padding-bottom: 65%;}
	.storypanel h1 {font-size:30px;font-size:7vw;width:90%;color:#444;margin:0 0 0 5%;}
	.tc-title {font-size:7vw;}
}

@media only screen and (max-width : 568px) and (orientation:portrait) {
	.header-img {padding-bottom: 140%;}
	.text-card-wrap {top:30px;width:96%;}
	.text-card-wrap h1 {font-size:50px;line-height:50px;padding:0 0 24px 0;}
	.nobreak {display:none;}
	.text-card-wrap a {width:96%;min-width:280px;height:45px;border-radius: 23px;-webkit-border-radius: 23px;margin-right:0;margin-bottom: 15px;}
	.text-card-wrap a .lozengetxt {top: 15px;font-size: 16px;}
	.lozenge:not(.launcher .lozenge) {margin-bottom: 15px;width:280px;height:45px;}
	.lozenge a:not(.launcher .lozenge a) {width:280px;height:45px;border-radius: 23px;-webkit-border-radius: 23px;}
	.storypanel h1 {font-size:40px;font-size:10vw;padding:15vh 0 0 0;}
	.procompare h1 {padding:0 0 40px 0;font-size:38px;width:280px;margin:0 auto;}
	.procompare .block {width:100%;font-size: 18px;}
	.procompare .block .block1 {margin:0 auto;float:none;width:280px;padding-bottom: 40px;border-bottom: 1px dashed #999999;}
	.procompare .block .block2 {margin:40px auto 83px auto;float:none;width:280px;}
	img.productname {width:280px;margin-bottom: 20px;}
	.procompare .lozenge, .procompare .lozenge a {width:280px;height:45px;border-radius:23px; -webkit-border-radius: 23px; font-size:18px;line-height:18px;margin-bottom: 14px;}
	.lozenge1 {margin-top:20px;}
	.procompare .lozengetxt {top:15px;}
	.ipad {width:55vh;}
	.pc {width:60vh;margin-left: -30vh;}
}

@media only screen and (max-width : 568px) {
	.galleryintro .button {display:none;}
	.galleryintro .menuitem {position: absolute;bottom:20px;font-size:20px;line-height: 20px;display:block;}
	.galleryintro .dropdown {left:-44px;background:#e3e3e3;}
	.galleryintro .learning .arrow {margin: 6px 0 0 6px;}
	.header .formitlogo {position: absolute; left: 21px; top: 36px; z-index: 1; width: 114px;content:url(../images/logo_m.png)}
	.launcher {display:none;}
}