@charset "UTF-8";
/* Web Solutions 4.0 Compatible */

h1{font-size: 2.25em}
h2{font-size: 1.88em}
h2 > em.text {font-size: 0.75em}
h3{font-size: 1.5em}
h4, th{font-size: 1.25em}

/* HEADER ------------------------------*/
body>header{position: relative; height: 7.5em; z-index: 10; background:#fff}
body>header>.wrap,
.home>header>.wrap {height: 7.5em; overflow: visible; padding: 0 1em}
#brand {display:block; width: 22.25em; height: 100%; position: absolute; top:50%; left: 1rem; transform: translateY(-50%)}
#brand:hover {opacity: 0.5}
#brand img {display:block;position: absolute; top:50%; left: 0; transform: translateY(-50%); max-width: 100%; height: auto}


/* NAV ------------------------------ */
nav ul{margin: 0}
#mainnav{overflow:visible; line-height: 7.5em; text-align: right;}
#mainnav ul{text-align:right;overflow:visible;margin: 0;padding: 0; display: inline-block}
#mainnav li{display:inline-block; line-height: 3.94rem; position:relative}
#mainnav>ul>li:first-child{position: static}
#mainnav>ul>li{margin-right: 2px}
#mainnav a{line-height:3.94rem; font-weight: 500; border-radius: 5px; font-size: 1.125em; padding:0 0.5em;display:inline-block;color:#5D6E7F;text-decoration:none;}
#mainnav>ul>li:hover>a, #mainnav>ul>li:active>a, #mainnav>ul>li.on:hover>a{background:#5D6E7F;color:#fff}
#mainnav>ul>li.on>a{background:#EFF6FF;color:#004A97}
/*dhtml*/
#mainnav li ul{width:14.13em;padding:1em 0; top: 100%; left: 0; background:#5D6E7F;position:absolute; z-index: 10; overflow:auto;height:auto}
#mainnav>ul>li:last-child ul{right:0}
#mainnav li ul li{width:100%;display:block;float:left}
#mainnav ul li ul li a{background:none;color:#fff}
#mainnav li ul li a{font-size:1rem; border-radius: 0; line-height:1.1em;font-weight:400; padding:.5em 1.5em; display:block;width:100%;text-align:left;float:left}
#mainnav li ul li a:hover, .t1 li ul li a:active{color:#fff;background:#7D98AB}
/* new css drop downs */
#mainnav li ul {top: -200vh;opacity: 0;left:0;z-index: -1;transition: ease 200ms opacity 0.35s;}
#mainnav li:hover ul {top:calc(100% - 5px);opacity: 1;z-index: 1;}
#mainnav .tel {color: #61B4E4; cursor: text; font-weight:500}
/* megamenu */
#mainnav li ul {top: -200vh;opacity: 0;left:0;z-index: -1;transition: ease 200ms opacity 0.35s;}
#mainnav li:hover ul {top:calc(100% - 5px);opacity: 1;z-index: 2;}

#mainnav #megamenu {top: -200vh;opacity: 0;z-index: -1;visibility: hidden; transition: ease 200ms opacity 0.35s; position: absolute;right: 0; z-index: 4; background: #fff;width: 49.94em; box-shadow: 0 2px 4px 0 rgba(145,145,145,0.50);
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;}
#mainnav li:hover #megamenu {top: calc(100% - 2.13rem);opacity: 1;z-index: 5; visibility: visible}
#mainnav #megamenu ul {opacity: 1; position: relative; float: left; top:auto; visibility: visible}
#mainnav #megamenu ul li a {border-radius: 0}
#mainnav #megamenu section {display:none;width: calc(100% - 14.13rem); padding: 4em 2em 1em;}
#mainnav #megamenu section .mega-text {max-width: 47%; float: left; margin-right: 6%; line-height: 1.63rem; text-align: left;}
#mainnav #megamenu section h2 {color: #004A97; font-size: 1.75rem; padding-bottom: 0.5em; background: url(/images/home/dashed-line-3.png) repeat-x bottom left; background-size:550px 2px}
#mainnav #megamenu section p {color: #7D98AB; font-size: 1rem}
#mainnav #megamenu section p strong {color: #FFB547; font-weight: 400; text-transform: uppercase}
#mainnav #megamenu section .mega-image {max-width: 47%;float: left}
#mainnav #megamenu section .mega-image img {max-width: 100%; height: auto;}
#mainnav .search {width: 2em;height: 1.5em;background: url(/images/search.svg) no-repeat center bottom;background-size: auto auto;background-size: 1em 1em;cursor: pointer;}
#mainnav .search:hover {opacity: 0.5}


/* mobile */
#mobilenav,.menu{display: none}




/* Content ------------------------------ */
.interior main {background: url(/images/bg-logo.png) no-repeat #fff; background-size: 36.69em 38.25em; background-position:calc(33.94em + 50%) calc(10.13em + 100%)}
.interior main.fade {background: url(/images/bg-logo.png) no-repeat, url(/images/blue-fade.jpg) repeat-x #fff; background-size: 36.69em 38.25em, auto; background-position:  calc(33.94em + 50%) calc(10.13em + 100%), top left}

main>div>aside{width:12rem; overflow:hidden;float: left;}
body.fullWidth  #content {width: 100%; overflow: visible; margin: 0 auto;float: none}
#content{float:right;width:calc(100% - 16.75em);padding:0 8.38em 7.5em 0;overflow:hidden;position:relative;}
.fullWidth #content {float:none;max-width: 62.5em; padding: 0 1em 7.5em; margin: 0 auto}

.breadcrumb{transform: translateY(-100%);}

.wsManagementLogin td:first-child {width:40%; text-align: right}
.twoCol {-webkit-columns:2;-moz-columns:2;columns:2;}
.threeCol {-webkit-columns:3;-moz-columns:3;columns:3;}
.resCol {
	-webkit-columns: auto;-moz-columns: auto;columns: auto;
	-webkit-column-width: 13em;-moz-column-width: 13em;column-width: 13em;
}
.formTable td{width:50%}
.formTable td{padding:0 0 .5em .5em}
.formTable td:first-child{padding:0 .5em .5em 0}
.formTable td[colspan="2"]{padding-right:0}
.formTable.formLoose,.formTable.formLoose td{width:auto}
.photoright{margin:0 0 3em 4em;}
.photoleft{margin:0 4em 3em 0;}
.pageHeader{width:100%;height:9.38em;border-bottom: 3px solid #fff; float: left; clear: both; background: url(/images/DefaultPageBanner.jpg) no-repeat center; background-size: cover}
.content .highlight h2 {font-size: 1.56em; margin-bottom: 1em}
blockquote {float: right; max-width: 18.75em; text-align: right; margin: 0 0 3em 3em}
.CTA {padding: 2.5em 0}
.CTA .border {padding: 7.81em 1em; position: relative;
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */}
     .CTA .border:before {content: ""; position: absolute; top:0; left:0; z-index: 2; display: block; width: 100%; height: 2px; background: url(/images/home/dashed-line-2.png) repeat-x top left; background-size: 1400px 2px}
     .CTA .border:after {content: ""; position: absolute; bottom:0; left:0; z-index: 2; display: block; width: 100%; height: 2px; background: url(/images/home/dashed-line-2.png) repeat-x top left; background-size: 1400px 2px}
     .home .CTA .border {padding: 11.06em 1em}

.CTA h2 {line-height: 120%}
.CTA h2 span {font-size: 3.13rem; line-height: 150%; margin-bottom: 0.2em}
.CTA h2,
.CTA p {font-size: 1.5em; line-height: 80%}
     .home .CTA h2 {font-size: 2.13em; line-height: 80%}
.CTA .button {margin-top: 0.65em}

#product-list {position: relative; padding: 0 1em 7.13em; z-index:3}
#product-list:before {content: ""; width: 25.56em; height: 14.78em; border-top: 3px solid #fff; border-radius: 50%; display: block; position: absolute; top: 0; right: calc(50% - 29.94em);background-image: url(/images/home/products-bg.svg); background-position: center; background-size: cover; background-attachment: fixed;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ddebfd+0,f3f8ff+40,f3f8ff+65&1+0,1+40,0.5+65 */
background: -moz-linear-gradient(top,  rgba(221,235,253,1) 0%, rgba(243,248,255,1) 40%, rgba(243,248,255,0.5) 65%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(221,235,253,1) 0%,rgba(243,248,255,1) 40%,rgba(243,248,255,0.5) 65%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(221,235,253,1) 0%,rgba(243,248,255,1) 40%,rgba(243,248,255,0.5) 65%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddebfd', endColorstr='#80f3f8ff',GradientType=0 ); /* IE6-9 */
}
#product-list .wrap {padding-top: 10em; margin-top: -5em}
#product-list a {position: relative; padding: 2em; width: 22.75em; border: 1.5px dashed transparent; clear: both; display: block; height: auto}
#product-list a:nth-child(odd) {float: right;}
#product-list a:nth-child(even) {float: left}
#product-list a:not(:first-child) {margin-top: -1.69em}
     #product-list a:nth-child(3),
     #product-list a:nth-child(7) {margin-right: 9.63em}
     #product-list a:nth-child(4),
     #product-list a:nth-child(8) {margin-left: 9.63em}
#product-list a.white {background: #fff; border-color: #DBDDE0}
#product-list a:hover {background: #004A97; border-color: #fff}
#product-list a img {position: absolute; top: 0; transform: translate(-50%, -50%)}
#product-list a.left img {left:0}
#product-list a.right img {right:0; transform: translate(50%, -50%)}
     #product-list a:first-child img {width: 12em; height: auto; transform: translate(-54%, -81%);}
     #product-list a:nth-child(2) img {width: 13.63em; height: auto; transform: translate(50%, -61%)}
     #product-list a:nth-child(3) img {width: 13.63em; height: auto; transform: translate(66%, -41%)}
     #product-list a:nth-child(4) img {width: 20em; height: auto; transform: translate(-35%, -74%)}
     #product-list a:nth-child(5) img {width: 10.5em; height: auto; transform: translate(-35%, -74%)}
     #product-list a:nth-child(6) img {width: 13.75em; height: auto; transform: translate(60%, -45%)}
     #product-list a:nth-child(7) img {width:13.75em; height: auto; transform: translate(60%, -40%)}
     #product-list a:nth-child(8) img {width: 16.88em; height: auto; transform: translate(-58%, -65%)}
#product-list a h2 {font-size: 1.63rem}
#product-list a:hover h2 {color: #fff}
#product-list a p {margin-bottom: 0}
#product-list a:hover p {color: #ccc}
#product-list a p span {text-transform: uppercase; color: #FFB547}

#welcome {padding: 7em 1em; background-image: url(/images/home/welcome-bg.png); background-size: 770px 802px; background-repeat: no-repeat; background-position: calc(100% + 90px) center}
#welcome .contain {max-width: 39.56em}

#callouts {position: relative;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
}
    .interior #callouts {width: calc(100% + 7.38em); margin-right: -7.38em}
#callouts:before {content: ""; position: absolute; top:5px; left:0; z-index: 2; display: block; width: 100%; height: 2px; background: url(/images/home/dashed-line.png) repeat-x top left; background-size: 1400px 2px}
#callouts:after {content: ""; position: absolute; bottom:5px; left:0; z-index: 2; display: block; width: 100%; height: 2px; background: url(/images/home/dashed-line.png) repeat-x top left; background-size: 1400px 2px}
#callouts a {width: 33.333%; position: relative; z-index: 1; height: 18.75rem}
    .interior #callouts a {font-size: 1.75em}
#callouts a+a {border-left: 3px solid #fff}

#resources {padding: 6.63em 1em}
#resources h2 {font-size: 1.75em0; margin-bottom: 0.65em; max-width: calc(50% - 3.13rem); padding-bottom: 0.5em; background: url(/images/home/dashed-line-3.png) repeat-x bottom left; background-size: 550px 2px}
#resources .flex {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
}
#resources .flex > div {width: 50%;}
#resources .flex > div:first-child {padding-right: 3.13rem}
#resources .flex > div:last-child {padding-left: 3.13rem; margin-top: -1em}
#resources .flex > div p {font-size: 1.125em; line-height: 2.13rem}
#resources .flex > div ul li {font-size: 1.125em; line-height: 2.13rem}

.content .product-list {margin-top: 3em;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.content .product-list li {width: 47%; margin: 0}
.content .product-list li:nth-child(n+3) {margin-top: 2.65em !important}
.content .product-list li+li {margin-top: 0}
.content .product-list li a {display: block; height: 100%; padding: 2em 1.5em}
.content .product-list li a:hover {border-color: #7D98AB}
.content .product-list li a:hover h2 {color: #61B4E4}
.content .product-list li a p {font-size: 1.125em; line-height: 1.63rem;}

#product-top {overflow: auto}
#product-top #product-image {max-width: 47.8%; float: left}
#product-top #product-image .main-image a:hover {opacity: 0.5}
#product-top #product-image .thumb.on {border-color: #004A97}
#product-top #product-info {max-width: 43.1%; float: right}
#product-top #product-info .downloads a+a {margin-left: 2em}

#tabs {margin-top: 4.88em; float: left; clear: both; overflow: auto; width: 100%; margin-bottom: 7.38em}
#tabs .tab {line-height: 3.13em; padding: 0 1.25em; margin-right: 0.35em}
#tabs section {padding: 2.5em; margin-top: 0.5em}
#tabs section .resCol {margin-bottom: 2em;
-webkit-column-width: 24em;
-moz-column-width: 24em;
column-width: 24em;}
#tabs section .half {float: right; width: 48%; margin: 0 0 2% 2%}
#tabs section h3 {clear: both}
#tabs section .image-list {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
#tabs section .image-list li {width: 30%; display: block;}
#tabs section .image-list li+li {margin: 0}
#tabs section .product-list li {width: 33%; margin-top: 0 !important}

#related-products {padding: 3.13em 1em}
#related-products .wrap {max-width: 62.5em;}
#related-products .wrap h2 {margin-bottom: 1em}
#related-products ul {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;}
#related-products li {width: 30%; float: left}
#related-products li a {display: block; height: 100%; padding: 2em 1.5em}
#related-products li a h3 {font-size: 1.25em}
#related-products li a:hover {border-color: #7D98AB}
#related-products li a:hover h3 {color: #61B4E4}

.addthis-smartlayers.addthis-smartlayers-desktop #at4-share {top: 20.5em !important; z-index: 1;}

.industry-header {padding: 2em; background-size: 920px auto; margin-bottom: 2em; background-position: -3em center}
.industry-header h1,
.industry-header p {color:#fff; font-family: "proxima-nova", sans-serif; max-width: 18.44rem}
.industry-header h1 {text-transform: uppercase}
.industry-header p {line-height: 1.88rem; margin-bottom: 0}

.mobileTable td {padding: 0.25em 1em}
.mobileTable td:first-child strong {white-space: nowrap}



/* footer */
body>footer .fatFooter {margin-bottom: 3.63rem;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
body>footer .fatFooter > * {padding-right: 3.75rem}
body>footer .events {width: 30%}
#web-solutions-exposure {float:right;margin-left:11px}
body>footer .wrap {line-height: 1em;}
body>footer .wrap nav span:before {content: "|"; margin: 0 0.5em}

.mobileOnly {display: none}

/* animations */
.animated {animation-duration: 0.5s; animation-fill-mode: both}
.fadeInLeft {animation-name: fadeInLeft; animation-delay: 1s}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, -50%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0);
  }
}


@media screen and (max-width: 1220px) {
    #product-list::before { right:8.5em}   
}

@media screen and (max-width: 1000px) {
    #product-list::before {display: none}
    #product-list .wrap {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-align-content: stretch;
        -ms-flex-line-pack: stretch;
        align-content: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;}
    #product-list a,
    #product-list a:not(:first-child),
    #product-list a:nth-child(3), 
    #product-list a:nth-child(7),
    #product-list a:nth-child(4), 
    #product-list a:nth-child(8){margin-top: 0; padding: 13em 2em 2em; width: 45%; margin-left:0; margin-bottom: 2em; margin-right:0}
    #product-list a img {transform: translate(-50%, calc(7em - 50%)) !important; left: 50% !important; right:0 !important; max-width:90%; width:auto;}
    .mobileTable td:first-child strong {white-space: normal}

}

@media screen and (max-width: 2000px) {
    #brand {width: calc(100% - 48em)}
    #callouts a {font-size: 3vw}
    #content {padding-right: 2em}
/*    #mainnav li #megamenu {width: 42.44em}*/
/*    #mainnav li:hover #megamenu {top: calc(100% - 1.13rem)}*/
    .interior #callouts {width: 100%}
    .interior #callouts a {font-size: 1.25em}
    .fullWidth main {padding-right: 4em}

}

@media screen and (max-width: 900px) {
    body>header,
    body > header > .wrap, 
    .home > header > .wrap{height: 4.5em}
    #brand {width:11.25em}
    #mainnav,
    #mainnav li {line-height: 4.5rem}
    #mainnav a {font-size: 0.875em; line-height: 3em}
    #mainnav li ul li a {font-size: 0.875em}
    #mainnav li:hover #megamenu {top: calc(100% - 1.13em); width: 44.03em}
    #mainnav #megamenu section {padding: 2em 1.5em 1em}
    #mainnav #megamenu section .mega-text {max-width: 100%; margin-right: 0}
    #mainnav #megamenu section h2 {font-size: 1.25rem}
    #mainnav #megamenu section .mega-image {max-width: 100%;}
    #mainnav #megamenu section .mega-image img {max-width: 50%; display: block}
    .interior #callouts {display: block}
    .interior #callouts a,
    .interior #callouts a+a {width: 100%; border: 0}
    .industry-header {background-size: 221% auto;}
    .industry-header h1,
    .industry-header p {max-width: 100%}
        .fullWidth main {padding-right: 0}
    #tabs section .product-list li {width: 49%}
    .content .product-list {margin-top: 1em}
    .content .product-list li {width: 100%}

}