@charset "UTF-8";

/*base.css */
.subheader,p.lead{
    color:#777}
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{
    margin:0;
    padding:0;
    border:0;
    font:inherit;
    vertical-align:baseline}
fieldset,form,ol,ul{
    margin-bottom:20px}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    display:block}
body{
    line-height:1;
    background:#fff;
    font:14px/21px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;
    color:#444;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:100%}
blockquote,q{
    quotes:none}
blockquote:after,blockquote:before,q:after,q:before{
    content:'';
    content:none}
table{
    border-collapse:collapse;
    border-spacing:0}
h1,h2,h3,h4,h5,h6{
    color:#181818;
    font-family:Georgia,"Times New Roman",serif;
    font-weight:400}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{
    font-weight:inherit}
h1{
    font-size:46px;
    line-height:50px;
    margin-bottom:14px}
h2{
    font-size:35px;
    line-height:40px;
    margin-bottom:10px}
h3{
    font-size:28px;
    line-height:34px;
    margin-bottom:8px}
h4{
    font-size:21px;
    line-height:30px;
    margin-bottom:4px}
h5{
    font-size:17px;
    line-height:24px}
h6{
    font-size:14px;
    line-height:21px}
p{
    margin:0 0 20px}
p img{
    margin:0}
p.lead{
    font-size:21px;
    line-height:27px}
em{
    font-style:italic}
strong{
    font-weight:700;
    color:#333}
small{
    font-size:80%}
blockquote,blockquote p{
    font-size:17px;
    line-height:24px;
    color:#777;
    font-style:italic}
blockquote{
    margin:0 0 20px;
    padding:9px 20px 0 19px;
    border-left:1px solid #ddd}
blockquote cite{
    display:block;
    font-size:12px;
    color:#555}
blockquote cite:before{
    content:"\2014 \0020"}
blockquote cite a,blockquote cite a:visited{
    color:#555}
hr{
    border:solid #ddd;
    border-width:1px 0 0;
    clear:both;
    margin:10px 0 30px;
    height:0}
a,a:visited{
    color:#333;
    text-decoration:underline;
    outline:0}
a:focus,a:hover{
    color:#000}
p a,p a:visited{
    line-height:inherit}
ul{
    list-style:none}
ol{
    list-style:decimal}
ol,ul.circle,ul.disc,ul.square{
    margin-left:30px}
ul.square{
    list-style:square}
ul.circle{
    list-style:circle}
ul.disc{
    list-style:disc}
ol ol,ol ul,ul ol,ul ul{
    margin:4px 0 5px 30px;
    font-size:90%}
ol ol li,ol ul li,ul ol li,ul ul li{
    margin-bottom:6px}
li{
    line-height:18px;
    margin-bottom:12px}
li p,ul.large li{
    line-height:21px}
img.scale-with-grid{
    max-width:100%;
    height:auto}
.button,button,input[type=submit],input[type=reset],input[type=button]{
    background:#eee;
    background:-moz-linear-gradient(top,rgba(255,255,255,.2) 0,rgba(0,0,0,.2) 100%) #eee;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,.2)),color-stop(100%,rgba(0,0,0,.2))) #eee;
    background:-webkit-linear-gradient(top,rgba(255,255,255,.2) 0,rgba(0,0,0,.2) 100%) #eee;
    background:-o-linear-gradient(top,rgba(255,255,255,.2) 0,rgba(0,0,0,.2) 100%) #eee;
    background:-ms-linear-gradient(top,rgba(255,255,255,.2) 0,rgba(0,0,0,.2) 100%) #eee;
    background:linear-gradient(top,rgba(255,255,255,.2) 0,rgba(0,0,0,.2) 100%) #eee;
    border:1px solid #aaa;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    color:#444;
    display:inline-block;
    font-size:11px;
    font-weight:700;
    text-decoration:none;
    text-shadow:0 1px rgba(255,255,255,.75);
    cursor:pointer;
    margin-bottom:20px;
    line-height:normal;
    padding:8px 10px;
    font-family:HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif}
.button:hover,button:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover{
    color:#222;
    background:#ddd;
    background:-moz-linear-gradient(top,rgba(255,255,255,.3) 0,rgba(0,0,0,.3) 100%) #ddd;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,.3)),color-stop(100%,rgba(0,0,0,.3))) #ddd;
    background:-webkit-linear-gradient(top,rgba(255,255,255,.3) 0,rgba(0,0,0,.3) 100%) #ddd;
    background:-o-linear-gradient(top,rgba(255,255,255,.3) 0,rgba(0,0,0,.3) 100%) #ddd;
    background:-ms-linear-gradient(top,rgba(255,255,255,.3) 0,rgba(0,0,0,.3) 100%) #ddd;
    background:linear-gradient(top,rgba(255,255,255,.3) 0,rgba(0,0,0,.3) 100%) #ddd;
    border:1px solid #888;
    border-top:1px solid #aaa;
    border-left:1px solid #aaa}
.button:active,button:active,input[type=submit]:active,input[type=reset]:active,input[type=button]:active{
    border:1px solid #666;
    background:#ccc;
    background:-moz-linear-gradient(top,rgba(255,255,255,.35) 0,rgba(10,10,10,.4) 100%) #ccc;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,.35)),color-stop(100%,rgba(10,10,10,.4))) #ccc;
    background:-webkit-linear-gradient(top,rgba(255,255,255,.35) 0,rgba(10,10,10,.4) 100%) #ccc;
    background:-o-linear-gradient(top,rgba(255,255,255,.35) 0,rgba(10,10,10,.4) 100%) #ccc;
    background:-ms-linear-gradient(top,rgba(255,255,255,.35) 0,rgba(10,10,10,.4) 100%) #ccc;
    background:linear-gradient(top,rgba(255,255,255,.35) 0,rgba(10,10,10,.4) 100%) #ccc}
.button.full-width,button.full-width,input[type=submit].full-width,input[type=reset].full-width,input[type=button].full-width{
    width:100%;
    padding-left:0!important;
    padding-right:0!important;
    text-align:center}
button::-moz-focus-inner,input::-moz-focus-inner{
    border:0;
    padding:0}
input[type=password],input[type=email],input[type=text],select,textarea{
    border:1px solid #ccc;
    padding:6px 4px;
    outline:0;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    font:13px HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;
    color:#777;
    margin:0 0 20px;
    width:180px;
    max-width:180px;
    display:block;
    background:#fff}
select{
    padding:0;
    width:220px}
input[type=password]:focus,input[type=email]:focus,input[type=text]:focus,textarea:focus{
    border:1px solid #aaa;
    color:#444;
    -moz-box-shadow:0 0 3px rgba(0,0,0,.2);
    -webkit-box-shadow:0 0 3px rgba(0,0,0,.2);
    box-shadow:0 0 3px rgba(0,0,0,.2)}
textarea{
    min-height:60px}
label,legend{
    display:block;
    font-weight:700;
    font-size:14px}
input[type=checkbox]{
    display:inline}
label span,legend span{
    font-weight:400;
    font-size:13px;
    color:#444}
.remove-bottom{
    margin-bottom:0!important}
.half-bottom{
    margin-bottom:10px!important}
.add-bottom{
    margin-bottom:20px!important}

/*skeleton.css */
.clear,.clearfix:after,.row:after{
    clear:both}
.container{
    position:relative;
    width:960px;
    margin:0 auto;
    padding:0}
.container .column,.container .columns{
    float:left;
    display:inline;
    margin-left:10px;
    margin-right:10px}
.row{
    margin-bottom:20px}
.column.alpha,.columns.alpha{
    margin-left:0}
.column.omega,.columns.omega{
    margin-right:0}
.container .one.column,.container .one.columns{
    width:60px}
.container .two.columns{
    width:140px}
.container .three.columns{
    width:220px}
.container .four.columns{
    width:300px}
.container .five.columns{
    width:380px}
.container .six.columns{
    width:460px}
.container .seven.columns{
    width:540px}
.container .eight.columns{
    width:620px}
.container .nine.columns{
    width:700px}
.container .ten.columns{
    width:780px}
.container .eleven.columns{
    width:860px}
.container .twelve.columns{
    width:940px}
.container .one-third.column{
    width:300px}
.container .two-thirds.column{
    width:620px}
.container .offset-by-one{
    padding-left:80px}
.container .offset-by-two{
    padding-left:160px}
.container .offset-by-three{
    padding-left:240px}
.container .offset-by-four{
    padding-left:320px}
.container .offset-by-five{
    padding-left:400px}
.container .offset-by-six{
    padding-left:480px}
.container .offset-by-seven{
    padding-left:560px}
.container .offset-by-eight{
    padding-left:640px}
.container .offset-by-nine{
    padding-left:720px}
.container .offset-by-ten{
    padding-left:800px}
.container .offset-by-eleven{
    padding-left:880px}
@media only screen and (min-width:768px) and (max-width:959px){
    .container{
        width:768px}
    .container .column,.container .columns{
        margin-left:10px;
        margin-right:10px}
    .column.alpha,.columns.alpha{
        margin-left:0;
        margin-right:10px}
    .column.omega,.columns.omega{
        margin-right:0;
        margin-left:10px}
    .alpha.omega{
        margin-left:0;
        margin-right:0}
    .container .one.column,.container .one.columns{
        width:44px}
    .container .two.columns{
        width:108px}
    .container .three.columns{
        width:172px}
    .container .four.columns{
        width:236px}
    .container .five.columns{
        width:300px}
    .container .six.columns{
        width:364px}
    .container .seven.columns{
        width:428px}
    .container .eight.columns{
        width:492px}
    .container .nine.columns{
        width:556px}
    .container .ten.columns{
        width:620px}
    .container .eleven.columns{
        width:684px}
    .container .twelve.columns{
        width:748px}
    .container .one-third.column{
        width:236px}
    .container .two-thirds.column{
        width:492px}
    .container .offset-by-one{
        padding-left:64px}
    .container .offset-by-two{
        padding-left:128px}
    .container .offset-by-three{
        padding-left:192px}
    .container .offset-by-four{
        padding-left:256px}
    .container .offset-by-five{
        padding-left:320px}
    .container .offset-by-six{
        padding-left:384px}
    .container .offset-by-seven{
        padding-left:448px}
    .container .offset-by-eight{
        padding-left:512px}
    .container .offset-by-nine{
        padding-left:576px}
    .container .offset-by-ten{
        padding-left:640px}
    .container .offset-by-eleven{
        padding-left:704px}
}
@media only screen and (max-width:767px){
    .container,.container .eight.columns,.container .eleven.columns,.container .fifteen.columns,.container .five.columns,.container .four.columns,.container .fourteen.columns,.container .nine.columns,.container .one-third.column,.container .one.column,.container .one.columns,.container .seven.columns,.container .six.columns,.container .sixteen.columns,.container .ten.columns,.container .thirteen.columns,.container .three.columns,.container .twelve.columns,.container .two-thirds.column,.container .two.columns{
        width:300px}
    .container .column,.container .columns{
        margin:0}
    .container .offset-by-eight,.container .offset-by-eleven,.container .offset-by-fifteen,.container .offset-by-five,.container .offset-by-four,.container .offset-by-fourteen,.container .offset-by-nine,.container .offset-by-one,.container .offset-by-seven,.container .offset-by-six,.container .offset-by-ten,.container .offset-by-thirteen,.container .offset-by-three,.container .offset-by-twelve,.container .offset-by-two{
        padding-left:0}
}
@media only screen and (min-width:480px) and (max-width:767px){
    .container,.container .eight.columns,.container .eleven.columns,.container .fifteen.columns,.container .five.columns,.container .four.columns,.container .fourteen.columns,.container .nine.columns,.container .one-third.column,.container .one.column,.container .one.columns,.container .seven.columns,.container .six.columns,.container .sixteen.columns,.container .ten.columns,.container .thirteen.columns,.container .three.columns,.container .twelve.columns,.container .two-thirds.column,.container .two.columns{
        width:420px}
    .container .column,.container .columns{
        margin:0}
}
.clear,.clearfix:after,.clearfix:before,.row:after,.row:before{
    display:block;
    overflow:hidden;
    visibility:hidden;
    width:0;
    height:0}
.container:after{
    content:"\0020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden}
.clearfix:after,.clearfix:before,.row:after,.row:before{
    content:'\0020'}
.clearfix,.row{
    zoom:1}

/*layout*/             

.my-account a,nav.top ul li a,ul.breadcrumbs li a{
    text-decoration:none}
body{
    color:#444;
    font-size:18px;
    font-family: 'Roboto', sans-serif;
    line-height:27px}
a{
    font-size:14px}
hr{
    margin:10px 0 20px}
img{
    width:100%;
    height:auto}
img.featured{
    border-bottom:5px solid #dfdfdf}
img.noscale{
    width:auto;
    height:auto}

/* animation */
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0);
    }
    
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0);
    }
    
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

nav.main ul {
    *zoom:1;
    list-style:none;
    margin:0;
    padding:0;
    background:#ccc;
}
nav.main ul:before,.nav ul:after {
    content:"";
    display:table;
}
nav.main ul:after {
    clear:both;
}
nav.main ul > li {
    float:left;
    position:relative;
}
nav.main a {
    display:block;
    margin-top: -12px;
    padding:18px 20px;
    line-height:1.2em;
    color:#000;
    /*    border-left:1px solid #595959;
    */
}
nav.main a:hover {
    text-decoration:none;
    background:#ddd;
}
nav.main li ul {
    background:#ccc;
}
nav.main li ul li {
    width:200px;
}
nav.main li ul a {
    border:none;
}
nav.main li ul a:hover {
    background:rgba(0,0,0,0.2);
}

/* Fade in fade out 

nav.main li ul {
position:absolute;
left:0;
top:36px;
z-index:1;
visibility:hidden;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:300ms ease;
-moz-transition:300ms ease;
-o-transition:300ms ease;
transition:300ms ease;
}
nav.main ul > li:hover ul {
visibility:visible;
opacity:1;
filter:alpha(opacity=100);
}
*/

/* Slide Down 

nav.main li ul {
position:absolute;
left:0;
top:36px;
z-index:1;
}
nav.main li ul li {
overflow:hidden;
height:0;
-webkit-transition:height 200ms ease-in;
-moz-transition:height 200ms ease-in;
-o-transition:height 200ms ease-in;
transition:height 200ms ease-in;
}
nav.main ul > li:hover ul li {
height:36px;
}
*/

/* Slide Down 2 

nav.main li ul {
position:absolute;
left:0;
top:36px;
z-index:1;
}
nav.main li ul li {
overflow:hidden;
max-height:0;
-webkit-transition:max-height 500ms ease;
-moz-transition:max-height 500ms ease;
-o-transition:max-height 500ms ease;
transition:max-height 500ms ease;
}
nav.main ul > li:hover ul li {
max-height:150px;
}
*/
/* Fold out */

nav.main li ul {
    position:absolute;
    left:0;
    top:36px;
    z-index:1;
    max-height:0;
    overflow:hidden;
    -webkit-transform:perspective(400) rotate3d(1,0,0,-90deg);
    -webkit-transform-origin:50% 0;
    -webkit-transition:350ms;
    -moz-transition:350ms;
    -o-transition:350ms;
    transition:350ms;
}
nav.main ul > li:hover ul {
    max-height:1000px;
    -webkit-transform:perspective(400) rotate3d(0,0,0,0);
}

nav.top ul,nav.top ul li{
    margin-bottom:0}
nav.top ul li a{
    text-transform:uppercase;
    font-size:16px}
/*nav.top ul li:after{
margin:0 10px;
color:#444;
content:"/";
font-size:14px}
*/
footer nav ul li:last-child:after,nav.top ul li:last-child:after{
    content:""}
nav.top ul li.selected a, nav.top ul li.selected ul li.selected a{
    color:#158697}
nav.top ul li.selected ul li a{
    font-weight:normal}
/*nav.top ul li:last-child a{
padding-right:0}
*/
.my-account{
    padding:40px 0}
.expand-menu{
    float:right;
    margin:20px;
    width:27px;
    height:27px;
    background:url(../img/expand-menu.png) no-repeat}
@media all and (-webkit-min-device-pixel-ratio:1.5){
    .expand-menu{
        background-image:url(../img/expand-menu@2x.png);
        background-size:27px 54px}
}
.expand-menu.open{
    background-position:0 -27px}
nav.small.top{
    display:none}
nav.small.top ul{
    display:none;
    margin:0}
nav.small.top ul li{
    padding:0;
    border-bottom:1px solid #ddd}
nav.small.top ul li a{
    display:block;
    padding:10px 20px}
nav.small.top ul li:first-child{
    border-top:1px solid #ddd}
nav.small.top ul li.selected{
    border:none;
    background:#333}
nav.small.top ul li.selected a{
    color:#fff}
nav.small.top form{
    display:inline-block;
    margin-bottom:0;
    padding:18px 0 0 20px}

nav.products {
    background-color:#848F9B;
    font-family: 'Glegoo', serif;
    padding-bottom:1px;
    margin-bottom:10px;
}
nav.products a {
    color:#fff;
    text-decoration: none;
    font-size: 16px;
    padding-left:8px;
}
nav.products h3 {
    color:#fff;
    font-size:18px;
    font-weight: 700;
    padding-top:10px;
    padding-left:8px;
    margin-bottom: 6px;
}
nav.products li {
    line-height: 14px;
    margin-bottom: 10px
}
ul.breadcrumbs li{
    float:left;
    font-size:12px}
ul.breadcrumbs li a{
    font-size:12px}
ul.breadcrumbs li a:hover{
    text-decoration:underline}
.navbar {
    
    background-color: #EAECEE;
    margin-bottom:40px;
}
header.main{
    height:60px;
    background-color: #324457}
header.main h1{
    color: #fff;
    font-weight: 400;
    font-size: 22px;
    font-family: 'Roboto', sans-serif;
    line-height: 58px}
a.searchbtn {
    background-color:#f8b807;
    color:#fff;
    padding:6px 16px 6px 16px;
    font-weight: 700;
    text-decoration:none;
    text-transform: uppercase;
}

article header h3 a{
    font-size:inherit}
header.main .container .twelve.columns{
    display:table-cell!important;
    float:none;
    height:300px;
    vertical-align:middle}
.logo {
    padding-top:15px;
}
.logo img {
    max-width:403px;
}
h1,h2,h3,h4,h5,h6{
    font-family: 'Glegoo', serif;
    color:#444;
    font-weight:normal}
h2 {
    color:#158697;
    font-size:30px;
}
h2 a {
    color:#158697;
    font-size:30px;
}
p.sub {
    color:#158697;
    
}
h3{
    font-family: 'Roboto', sans-serif;
    margin-bottom:22px;
    font-size:22px;
    color:#158697}
h3 a {
    color:#158697;
    font-size:22px;
    text-decoration:none;
}
.announcement-list h3 {
    margin-bottom:1px;
}
.announcement-list p {
    color: #158697;
    font-weight: bold;
}
.announcement-list a {
   font-size: 18px;
   font-weight: 200;
   text-decoration: none;
}

.announcement-list a[target=new]:after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}
  
h4{
    font-size:18px;
    margin-bottom:20px;
    line-height:normal}
sup{
    vertical-align:super;
    font-size:small;
    line-height:0}
p.subscribe {
    color:#324457;
    font-size: 18px;
    margin-bottom: 12px
}

a.read-more{
    color:#bbb;
    text-decoration:none;
    font-weight:700;
    font-size:14px}
a.read-more span{
    font-weight:400;
    font-size:21px;
    font-family:Arial}
a.read-more span.fb_comments_count{
    font-weight:700;
    font-size:14px}
a.read-more:hover{
    text-decoration:underline}
a.read-more+a.read-more{
    margin-left:20px}
article{
    margin-bottom:50px!important}
blockquote.big{
    margin-bottom:60px;
    padding:33px 0 39px;
    border-top:1px solid #b8b8b8;
    border-right:none;
    border-bottom:1px solid #b8b8b8;
    border-left:none;
    color:#bbb;
    text-align:center;
    font-weight:400;
    font-style:normal;
    font-size:24px;
    line-height:normal}
.avatar{
    position:relative;
    display:table-cell;
    vertical-align:top;
    line-height:0}
.avatar .overlay{
    position:absolute;
    top:0;
    left:0;
    z-index:2}
.avatar img{
    width:auto;
    height:auto}
.testimonial{
    position:relative}
.testimonial blockquote{
    display:table-cell;
    padding:0 0 0 20px;
    border:none;
    vertical-align:middle;
    font-weight:400;
    font-style:italic;
    font-size:18px}
.slider{
    margin-bottom:60px;
    padding-top:40px;
    border-top:1px solid #b8b8b8}
.slider nav{
    margin-bottom:16px}
.slider nav.small{
    display:none;
    text-align:center}
.slider nav div:first-child{
    text-align:right}
.slider nav div:nth-child(2){
    text-align:center}
.slider nav div:last-child{
    text-align:left}
.product,.slide,a.add-to-cart{
    text-align:center}
.slider nav a{
    text-decoration:none;
    font-weight:700;
    font-size:14px}
.slider nav a span{
    font-weight:400;
    font-size:21px;
    font-family:Arial}
.slide p.caption{
    padding:10px 0;
    font-size:14px}
.slide img{
    width:100%;
    height:auto;
    border-bottom:5px solid #dfdfdf}
.highlight{
    margin-bottom:60px;
    padding:50px 0;
    background:url(https://www.securityinfoportal.co.uk/img/highlight-area-background.png) left top}
footer{
    padding-bottom:20px;
    font-size:14px;
    line-height: 18px;
    color:#fff;
    background-color: #158697;
    padding-top:22px;
    margin-top:40px;
    
}
footer a, footer a:visited {
    color:#fff;
    text-decoration:none;
}
.footer-logo {
    max-width:403px;
}
footer a.powered{
    color:#888;
    text-decoration:none}
footer nav ul li{
}
footer nav ul li a{
    text-decoration:none;
    font-size:14px;
    color:#fff;
}
footer nav ul li a:hover{
    color:#fff;
    text-decoration:underline}
footer nav ul li a:visited{
    color:#fff;
}
.foot-col {
    border-left: 2px solid #E2CB32;
    padding-left: 10px;
}
.meta-info a,article.blogpost h3 a{
    text-decoration:none}
footer nav ul li:after{
    margin:0 10px;
    font-size:14px}
.BlogPostArchive ul li,.BlogRecentPost ul li,.meta-info,ul.link-list li{
    margin-bottom:10px}
.productList .productItemLast .columns,.productfeaturelist .productItem:nth-child(3n) .columns{
    margin-right:0}
.productList .productItem:nth-child(3n+1) .columns,.productfeaturelist .productItem:nth-child(3n+1) .columns{
    margin-left:0}
article.blogpost h3{
    display:table-cell;
    padding:0 0 0 20px;
    vertical-align:middle}
article.blogpost header{
    position:relative;
    margin-bottom:10px}
article.blogpost .post-body{
    position:relative;
    overflow:hidden;
    max-height:500px}
article.blogpost .post-body .fade-out{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:150px;
    background:-moz-linear-gradient(top,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,1)));
    background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);
    background:-o-linear-gradient(top,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);
    background:-ms-linear-gradient(top,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);
    background:linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0 )}
.meta-info{
    display:inline-block;
    color:#888;
    font-size:14px}
.meta-info strong{
    color:inherit}
.meta-info a{
    color:#bbb;
    font-weight:700}
.meta-info a:hover{
    text-decoration:underline}
hr{
    border-top:1px solid #ccc}
.BlogPostArchive ul li a,.BlogRecentPost ul li a,ul.link-list li a{
    text-decoration:none;
    font-size:14px;
    line-height:21px}
.BlogPostArchive ul li a:hover,.BlogRecentPost ul li a:hover,ul.link-list li a:hover{
    text-decoration:underline}
.contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=phone],.contact-form textarea{
    width:290px}
.filters ul{
    margin-bottom:20px;
    font-size:18px}
.filters ul li{
    display:block;
    margin-bottom:0;
    line-height:27px}
.filters ul li a{
    text-decoration:none;
    font-size:18px}
.filters h4{
    margin-bottom:12px;
    color:#bbb;
    font-weight:700}
.product{
    margin-bottom:53px;
    font-weight:700;
    font-size:18px}
.product a{
    text-decoration:none;
    font-size:18px}
.image-with-price{
    position:relative;
    margin-bottom:43px}
.image-with-price a,.image-with-price a img,.image-with-price img{
    display:block}
.image-with-price span{
    position:absolute;
    right:10px;
    bottom:-20px;
    display:block;
    padding:0 20px;
    height:40px;
    background:#bbb;
    color:#fff;
    font-weight:600;
    font-size:24px;
    line-height:38px}
.image-with-price.big span{
    top:-20px;
    bottom:auto}
.image-with-price.big{
    margin-bottom:10px}
.image-with-price.big img{
    border:1px solid #dcdcdc}
.description{
    font-size:18px;
    line-height:27px}
.big-product-title{
    max-width:500px}
a.add-to-cart{
    display:block;
    width:100%;
    height:40;
    background-color:#bbb;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    line-height:40px}
a.add-to-cart:hover{
    background-color:#e15a11}
ul.gallery-thumbnails li{
    display:inline-block}
ul.gallery-thumbnails li a,ul.gallery-thumbnails li a img{
    display:block}
ul.gallery-thumbnails li a{
    border:1px solid #dedede;
    opacity:.3;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter:alpha(opacity=30)}
ul.gallery-thumbnails li a.selected{
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100)}
.fb-comments{
    margin-top:20px}
.productList .productItem,.productList .productItemLast,.productfeaturelist .productItem{
    display:inline-block;
    margin-bottom:0;
    vertical-align:top}
.catProdAttributeTitle{
    display:block;
    margin-bottom:22px;
    color:#444;
    font-weight:600;
    font-size:24px;
    font-family: 'Roboto', sans-serif;
    line-height:34px}
.cart th,.pagination,.pagination a{
    font-weight:700}
.catProdAttributeItem{
    display:inline-block;
    margin-right:4px;
    margin-bottom:20px}
.catProdAttributeItem input{
    display:none}
.catProdAttributeItem span{
    display:block;
    padding:6px 9px;
    border:1px solid #dcdcdc;
    color:#333;
    text-decoration:none;
    font-weight:700;
    line-height:normal;
    cursor:pointer;
    border-radius:2px;
    -moz-border-radius:2px}
.catProdAttributeItem span.selected,.catProdAttributeItem span.selected:hover{
    border:1px solid #bbb;
    background:#bbb;
    color:#fff}
.catProdAttributeItem span:hover{
    background:#e9e9e9;
    color:#000}
img[src="/img/add-to-cart.png"]{
    width:auto}
.productPoplets{
    margin:0 auto}
.productTextInput{
    height:24px;
    border:1px solid #dcdcdc!important}
td.cartSummaryItem{
    padding:0 0 20px;
    font-size:14px}
.gallery-thumbnails{
    margin:4px auto 5px}
.pagination{
    color:#333;
    font-size:14px}
.pagination a{
    display:inline-block;
    font-size:14px}
.cart{
    margin-bottom:20px;
    width:100%;
    text-align:left;
    font-size:14px}
.actions,.cart-summary{
    text-align:right}
.cart td,.cart th{
    padding:5px;
    vertical-align:middle}
.cart tbody tr:nth-child(odd){
    background:#f6f6f6}
.cart .cartInputText{
    margin:0;
    width:50px}
.cart .discountcodeInput{
    display:inline;
    margin:0}
#catshopbuy,#catshopclear,#catshopquote,.button,button,input[type=submit],input[type=reset],input[type=button]{
    -webkit-appearance:none;
    margin:0;
    padding:6px 16px 6px 16px;
    border:none;
    -moz-border-radius:2px;
    border-radius:2px;
    background:#A42664;
    color:#fff;
    text-decoration:none;
    text-shadow:none;
    font-weight:700;
    font-size:16px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
}

#catshopbuy:hover,#catshopclear:hover,#catshopquote:hover,.button:hover,button:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover{
    -webkit-appearance:none;
    margin:0;
    padding:6px 16px 6px 16px;
    border:none;
    background:#A42664;
    color:#fff;
    text-decoration:none;
    text-shadow:none;
    font-weight:700;
    font-size:16px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
}
.productSubmitInput{
    font-size:18px!important}
.cart input.update{
    font-weight:400}
.cart tr.shipping td,.cart tr.sub-total td,.cart tr.total td{
    background:#f6f6f6}
.cart tr.discount td{
    padding-top:5px}
.cart tr.giftvoucher td{
    padding-bottom:5px;
    background:#fff}
.cart-summary{
    margin-bottom:30px}
.cart-summary a{
    font-size:14px}
.section-header{
    margin-bottom:20px;
    padding:10px;
    height:15px;
    background:#F6F6F6;
    color:#333;
    font-weight:700;
    line-height:15px}
.sidebar-header{
    padding:5px 20px;
    background:#0f0f0f;
    color:#fff}
.sidebar-header h4{
    float:left;
    margin:0;
    padding:0;
    color:#fff;
    line-height:auto}
#checkout-total{
    margin-bottom:20px;
    padding:10px;
    background:#F6F6F6;
    color:#333;
    font-weight:700}
#checkout-total #grand-total{
    float:left}
#checkout-total h4{
    margin:0}
#check-out-form input[type=text],#check-out-form textarea{
    width:300px}
.small{
    font-size:11px;
    line-height:13px}
#check-out-form select{
    height:29px}
#CardExpiryMonth,#CardExpiryYear{
    display:inline-block;
    width:150px}
a.small-link{
    color:#bbb;
    font-weight:700;
    font-size:12px}
#checkout-total #catwebformbutton{
    float:right;
    width:auto;
    background-position:0 -248px}
.shop-quote .cat_listbox,.shop-quote .cat_textbox{
    display:inline;
    width:400px}
.shop-quote .cat_listbox{
    height:150px}
#catCartDetails>a{
    display:block;
    margin:0 auto 40px;
    font-size:14px;
    text-align:center}
.shop-cart{
    margin-bottom:40px}
.data-table,.order-product-list{
    width:100%;
    font-size:14px}
.case-list tbody tr td,.order-list tbody tr td{
    cursor:pointer}
.case-list tbody tr:hover,.case-list tbody tr:nth-child(odd):hover,.order-list tbody tr:hover,.order-list tbody tr:nth-child(odd):hover{
    background:#111;
    color:#fff}
.case-list tbody tr:hover a,.order-list tbody tr:hover a{
    color:#fff}
.case-list tbody tr:hover a:hover,.order-list tbody tr:hover a:hover{
    text-decoration:none}
.case-list th,.data-table th,.order-list th,.order-product-list th{
    text-align:left;
    padding:5px;
    font-weight:700;
    font-size:14px}
.case-list td,.data-table td,.order-list td,.order-product-list td,.order-product-list td .productitemcell{
    padding:5px;
    vertical-align:middle}
.data-table tbody tr:nth-child(odd),.order-product-list tbody tr:nth-child(odd),.order-product-list tr .productitemcell:nth-child(odd){
    background:#f6f6f6}
label+div{
    margin-bottom:20px}
.system-message{
    font-size:14px}
.search-result img{
    width:auto;
    height:auto}
.search-box{
    position:relative}
.search-box input{
    display:inline-block}
.search-box input[type=text]{
    width:150px;
    margin:0}
.big-search{
    padding-top:40px}

input[type=password], input[type=email], input[type=text], select, textarea {
    margin-bottom:5px;
}
.block {
    font-family: 'Glegoo', serif;
    color:#000;
    width:85%;
    text-align: center;
    font-size: 24px;
    min-height: 60px;
    padding:20px;
    margin:10px;
}
.blk a {
    text-decoration: none;
}
.blk p {
    height: 20px;
    color:#324457;
    font-size: 18px;
    margin-left: 10px;
}

.block.ltop{
    background-color:#f8b807;
}
.block.lmid{
    background-color:#77A560;
}
.block.lbtm{
    background-color:#F0E59C;
    color:#444;
    padding-top:34px;
    padding-bottom:6px;
}
.block.mtop{
    background-color:#98A1AA;
    padding-top:34px;
    padding-bottom:6px;
}
.block.mmid{
    background-color:#8CC2CB;
}
.block.mbtm{
    background-color:#8CC2CB;
    color:#444;
}
.block.rtop{
    background-color:#158697;
    padding-top:34px;
    padding-bottom:6px;
}
.block.rmid{
    background-color:#98A1AA;
    padding-top:34px;
    padding-bottom:6px;
}
.block.rbtm{
    background-color:#BAD2B0;
}
.newsletter-form{
    margin-left:20px;
}
.newsletter-form input{
    margin-bottom:15px;
}
.social img {
    width:initial;
}
.infographic img {
    width:initial;
    
}
.infographic {
    margin-top:20px;
}
.mobile {
    display:none;
}


.dir-entry {
    border-top: 1px solid #CBCBCB;
    margin-top:20px;
    padding-top:20px;
}

.dir-entry h2 {
    font-family: 'Roboto', sans-serif;
    font-size:16px;
    line-height:18px;
    color:#666;
}
.dir-entry p {
    font-size:13px;
    line-height:15px;
}
.dir-entry p a {
    color:#A42664;
    text-decoration:none:
}
.dir-logo img {
    max-width:180px;
}
.pagecontent a {
  font-size:18px;
}
.pagecontent ul {
    list-style: disc;
    list-style-position: outside;
    margin-left:40px;
}
.pagecontent ul li {
  line-height: 25px;
}
b, strong {
    font-weight: 700;
}
.serviceblocks {
    margin-top:40px;
}
ul.directory-contacts  {
    list-style:none;
    font-size:12px;
}
ul.directory-contacts a {
    text-decoration:none;
    font-size:12px;
    color:#A42664
}
ul.directory-contacts li {
    margin: 0px
}

div.two.columns.dir-logo {
    margin-left:0px;
    
}
div.three.columns.dir-contacts{
    
    margin-right:0px;
    
}

/*email header */

.main.email-header {
    height:110px;
}

.main.email-header .hplogo h3 {
    color:white;
    text-align:right;
    margin-top: 26px;
    font-size: 18px;
    
}
.main.email-header .hplogo img {
    margin-top: 10px;
    background-color: white;
}
.terms {
    background-color: #158697;
    color:white;
    font-size:16px;
    padding:20px;
    line-height:18px;
    
}

.email-body a {
    font-size:18px;
}

/* BC default form layout fix */
.webform br {
    display:none}
.webform {
    font-size: 16px;
}

.webform.wftwo br {
    display:initial}

}


a.sponsoredlink1 {
    display:block;
}

a.sponsoredlink, a.sponsoredlink0  {
    display:none;
}
a.sponsoredlink1 {
    color:white;
    text-decoration:none;
    background-color: #A42764;
    width:98px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 16px;
    margin-top:10px;
}

.sponsoredgoback a {
    text-decoration:none;
    color:#A42764;
    
}
.sponsoredtitle {
    float:left;
    width:55%;
    text-transform:uppercase;
}
.sponsoredtitle h1 {
    color:#898989;
    font-size:38px;
}

.sponsoredlogo {
    text-align:center;
}
.sponsoredlogo img {
    max-width:300px;
    padding-top:40px;
}
.sponsoreddivide {
    clear:both;
    padding-top:40px;
}
p.sponsoredintro {
    font-size:17px;
    line-height:25px;
}
.sponsoredbody, .sponsoredbody p {
    font-size:15px;
    line-height:22px;
}

.sponsoredbody ul {
list-style: disc;
list-style-position:inside;
margin-left: 10px
}
.sponsoredblock{
    background-color:#EAECEE;
    padding:15px;
    margin-bottom:20px;
}
.sponsoredblock h2{
    color:#314457;
    font-size:19px;
    line-height: 22px;
}
a.sponsoredwebsite {
    background:url(../img/arrow.png) no-repeat left top;
    padding-left:38px;
    display:block;
    height:39px;
    
}
a.sponsoreddownloads{
    background:url(../img/doc.png) no-repeat left top;
    padding-left:38px;
    display:block;
    min-height:39px;
    text-decoration:none;
    line-height:18px;
    padding-bottom:20px;
}
.sponsoredblock .webform input[type=text], select, textarea {
    width:176px;
    margin-top:14px;
}

@media only screen and (max-width:1000px){
    header.main h1 {
        font-size:18px;
    }
    a.searchbtn {
        font-size: 11px;
    }
}


@media only screen and (max-width:960px){
    .infographic {
        display:none;
    }
    .mobile {
        display:block;
    }
    nav.products a {
        font-size: 12px;
    }
    
}


@media only screen and (max-width:767px){
    .discountcodeInput{
        margin-bottom:10px!important;
        width:auto!important}
    .shop-cart .update{
        margin-bottom:10px!important;
        width:100%}
    header.main h1 {
        display:none
    }
    
}
@media only screen and (min-width:480px) and (max-width:767px){
    .slider nav.large{
        display:none}
    .slider nav.small{
        display:block}
    .big-search{
        display:none}
    nav.small.top,nav.top ul li{
        display:block}
    nav.top ul{
        margin:20px 0;
        padding:0}
    nav.top ul li{
        padding:5px 0}
    nav.top ul li:after{
        margin:0;
        color:#fff;
        content:"";
        font-size:14px}
    
    .my-account,nav.main.top{
        display:none}
    .actions{
        text-align:left}
}
@media only screen and (max-width:479px){
    .main.email-header .hplogo h3 {
        text-align:center;
        
    }
    .slider nav.large{
        display:none}
    .slider nav.small{
        display:block}
    .big-search,.blogpost .avatar{
        display:none}
    nav.small.top,nav.top ul li{
        display:block}
    .blogpost header h3{
        padding-left:0}
    nav.top ul{
        margin:20px 0;
        padding:0}
    nav.top ul li{
        padding:5px 0}
    nav.top ul li:after{
        margin:0;
        color:#fff;
        content:"";
        font-size:14px}
    .my-account,nav.main.top{
        display:none}
    .actions{
        text-align:left}
    #check-out-form input[type=text],#check-out-form textarea,input[type=password],input[type=text],input[type=email],select,textarea{
        width:290px}
    .shop-quote .cat_listbox,.shop-quote .cat_textbox{
        display:inline;
        width:290px}
    .shop-quote .cat_listbox{
        height:150px}
    .collapsing-table,.collapsing-table tbody,.collapsing-table td,.collapsing-table th,.collapsing-table thead,.collapsing-table tr{
        display:block}
    .collapsing-table{
        border-bottom:1px solid #ccc}
    .collapsing-table thead tr{
        position:absolute;
        top:-9999px;
        left:-9999px}
    .collapsing-table tr{
        border:1px solid #ccc;
        border-bottom:0}
    .collapsing-table td{
        position:relative;
        padding-left:45%;
        border:none;
        border-bottom:1px solid #eee}
    .collapsing-table td:before{
        position:absolute;
        top:5px;
        left:5px;
        padding-right:10px;
        width:45%;
        white-space:nowrap;
        font-weight:700}
    .collapsing-table td:last-child{
        border-bottom:0}
    .order-product-list td:nth-of-type(1):before{
        content:"Product"}
    .order-product-list td:nth-of-type(2):before{
        content:"Price"}
    .order-product-list td:nth-of-type(3):before{
        content:"Tax"}
    .order-product-list td:nth-of-type(4):before{
        content:"Quantity"}
    .order-product-list td:nth-of-type(5):before{
        content:"Total"}
    .order-list td:nth-of-type(1):before{
        content:"Order"}
    .order-list td:nth-of-type(2):before{
        content:"Date"}
    .order-list td:nth-of-type(3):before{
        content:"Status"}
    .order-list td:nth-of-type(4):before{
        content:"Ammount"}
    .case-list td:nth-of-type(1):before{
        content:"Subject"}
    .case-list td:nth-of-type(2):before{
        content:"Case number"}
    .case-list td:nth-of-type(3):before{
        content:"Date"}
    .case-list td:nth-of-type(4):before{
        content:"Status"}
    .cart.product-list td:nth-of-type(1):before{
        content:"Product"}
    .cart.product-list td:nth-of-type(2):before{
        content:"Unit price"}
    .cart.product-list td:nth-of-type(3):before{
        content:"Quantity"}
    .cart.product-list td:nth-of-type(4):before{
        content:"Tax"}
    .cart.product-list td:nth-of-type(5):before{
        content:"Total"}
}

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

.ellipses {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.g-recaptcha {
    transform:scale(0.67);
    transform-origin:0 0;
}
.announcement-details h1 {
  font-size:26px;
}
.events h3 {
  margin-bottom: 0;
  margin-top: 22px;
  font-weight: 600;
}
.events h3 a {
  color:black;
}



.events p.date {
  color:#158697;
  margin:0;
  font-weight: bold;
}
.charities img {
  width:100%;
  padding:15px;
}
.charities.border {
border-bottom: 1px solid #CBCBCB;
}
.charities .three {
  text-align: center;
}