﻿/* fonts */
@font-face {
    font-family: 'MyriadPro-Regular';
    src: url('../fonts/MyriadPro-Regular.eot');
    src: local('☺'), url('../fonts/MyriadPro-Regular.ttf') format('truetype'), url('../fonts/MyriadPro-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadPro-Semibold';
    src: url('../fonts/MyriadPro-Semibold.eot');
    src: local('☺'), url('../fonts/MyriadPro-Semibold.ttf') format('truetype'), url('../fonts/MyriadPro-Semibold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadPro-Light';
    src: url('../fonts/MyriadPro-Light.eot');
    src: local('☺'), url('../fonts/MyriadPro-Light.ttf') format('truetype'), url('../fonts/MyriadPro-Light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

.red {
    color: #900;
}

body {
    color: #464646;
    font-size: 100%;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1em;
}

table thead, table tbody, table tfoot {
     background-color: transparent; 
}

.off-canvas-wrapper-inner, .off-canvas-content {
    background-image: url("../images/tail-top.gif");
    background-color: #f2f2f2;
    background-position: left top;
    background-repeat: repeat-x;
}

body, h1, h2, h3, h4, h5, h6 {
    font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
    font-weight: 600;
}

a:hover, a:focus {
    color: #82b704;
}

a.nounderline {
    color: #FFF;
    text-decoration: none;
}

.off-canvas, .is-drilldown-submenu  {
      background: #262626; /* Old browsers */
    background: -moz-linear-gradient(top, #262626 0%, #1b1c1c 32%, #060505 81%, #010000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#262626), color-stop(32%,#1b1c1c), color-stop(81%,#060505), color-stop(100%,#010000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #262626 0%,#1b1c1c 32%,#060505 81%,#010000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #262626 0%,#1b1c1c 32%,#060505 81%,#010000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #262626 0%,#1b1c1c 32%,#060505 81%,#010000 100%); /* IE10+ */
    background: linear-gradient(to bottom, #262626 0%,#1b1c1c 32%,#060505 81%,#010000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#010000',GradientType=0 ); /* IE6-9 */
    height: 100%;
}

.off-canvas li {
    padding: 0px 15px;
    margin-top: 1px;
    /*border-bottom: 1px solid gray;*/
    font-weight: normal;
    color: #fff;
}

.container {
    max-width: 990px;
    margin: auto;
}

.off-canvas-content {
    box-shadow: none;
}

li {
    outline: none;
}

 li {
    font-size: 90%;
    font-weight: normal;
    line-height: 1.2em;
    font-family: 'MyriadPro-Regular',Sans-Serif;
}

a#submenu-ar {
    outline: none;
}

.menu.vertical > li a.current {
    color: #82b704;
}


/*** NAVIGATION **/
.menu.vertical > li {
    /*background: #333333;*/
    margin-top: 1px;
    
}

.top-bar-left {
    line-height: 75px;
}

.title-bar-right {
    line-height: 60px;
}

.title-bar {
    background: url(../images/divider.gif) repeat-y left top;
    padding:0;
}

.header-box {
    position: relative;
    top: 10px;
    width: 100%;
    background: url(../images/header-box-tail.gif) repeat-x left top;
}

    .header-box .right {
        height: 81px;
        background: url(../images/header-box-right.gif) no-repeat right top;
    }

    .header-box .left {
        background: url(../images/header-box-left.gif) no-repeat left top;
    }

.title-bar .menu-icon {
    margin-top: 1.2rem;
    margin-right:1.5rem;
}

.menu > li > a {
    color: #fff;
    padding-left:.5rem;
    text-transform:uppercase;
}

.top-bar-right > .menu > li {
    background: url(../images/divider.gif) repeat-y left top;
}

li.submenu.is-dropdown-submenu-parent.opens-left {
    background: none;
}

            .top-bar-right li.current a, .top-bar-right li a:hover, .menu.vertical > li a.current {
                color: #82b704;
            }

            .top-bar-right li.first {
                background:none;
            }

.dropdown.menu > li.is-dropdown-submenu-parent > a {
    padding: 5px;
    padding-right:15px;
}

.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
    display:none;
}

#submenu-ar span:hover {
    background: url(../images/ddArrow_hover.png) no-repeat center 15px;
}

#submenu-ar span {
    width: 30px;
    height: 40px;
    float: left;
    background: url(../images/ddArrow.png) no-repeat center 15px;
        position: absolute;
    margin-top: -27px;
    margin-left: -22px;
}

/*--subnav styles--*/
ul.subnav {
    position: absolute;
    margin: 0;
    padding: 0;
    display: none;
    float: left;
    top: 50px;
    left: 0;
    width: 180%;
    z-index: 9000;
    background: #262626; /* Old browsers */
    background: -moz-linear-gradient(top, #262626 0%, #1b1c1c 32%, #060505 81%, #010000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#262626), color-stop(32%,#1b1c1c), color-stop(81%,#060505), color-stop(100%,#010000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #262626 0%,#1b1c1c 32%,#060505 81%,#010000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #262626 0%,#1b1c1c 32%,#060505 81%,#010000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #262626 0%,#1b1c1c 32%,#060505 81%,#010000 100%); /* IE10+ */
    background: linear-gradient(to bottom, #262626 0%,#1b1c1c 32%,#060505 81%,#010000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#010000',GradientType=0 ); /* IE6-9 */
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border:none;
    text-transform:none;
}

.subnav > li > a {
    text-transform: none;
}

    ul.subnav li, ul.subnav li.first {
        margin: 0;
        padding: 0;
        width: 100%;
        float: none;
        text-align: left;
        font-size: 16px;
        text-transform: none;
        line-height: 2.5em;
        background: url(../images/divider.gif) repeat-x left top;
    }

        ul.subnav li.first {
            background: none;
        }

        ul.subnav li a:hover {
            -webkit-box-shadow: inset 0px 3px 1px 0px #151515;
            box-shadow: inset 0px 3px 1px 0px #151515;
            background: #171717;
            -webkit-border-radius: 6px;
            border-radius: 6px;
        }


/* Medium and up */
@media screen and (min-width: 40em) {
    li {
        font-size: .8rem;
    }
}

/* Large and up */
@media screen and (min-width: 64em) {
    .menu > li {
        font-size: 1rem;
    }

    .menu > li > a {
        padding-left: 1.5rem;
    }
}



/*** SLIDER ***/
.sm-slide {
    margin: 0;
    padding: 0;
}

.column.slide-nav {
    margin: 0;
    padding: 0;
    line-height: 1em;
}

.orbit-bullets {
    margin-top: 0;
    margin-bottom: 0;
    background: #438422;
}

    .orbit-bullets button {
        border: solid 0.1em #438422;
        text-align: left;
        border-radius: 4px;
        width: 100%;
        height: 3.313em;
        margin: 0px;
        padding: 0px;
        background-image: url("../images/3Up/thumb-sprite.png");
        background-position: left -5.31em;
        padding-left: 8px;
    }

        .orbit-bullets button.is-active, .orbit-bullets button:hover {
            background-position: left top;
        }

button.is-active a {
    color: #ffffff;
    font-size: 75%;
}

button a {
    color: #464646;
    font-size: 75%;
}

    button a span {
        font-family: "MyriadPro-Light",sans-serif;
        font-weight: normal;
        text-shadow: 1px 1px 1px #cccccc;
    }

    button a small, button.is-active a small {
        padding-top: 3px;
        float: left;
        color: #428301;
    }

.slide-container {
    background: rgba(0, 0, 0, 0) url("../images/pageHeaders/enter.png") no-repeat;
    background-size: cover;
    height: auto;
    margin:5px;
    margin-top:15px;
}

.soft-header {
    background: rgba(0, 0, 0, 0) url("../images/pageHeaders/frustrated.png") no-repeat;
    background-size: cover;
}

.slide-1 {
    background: url('../images/pageHeaders/slider_frustrated.png') no-repeat 0 35px;
}

.slide-2 {
    background: url('../images/pageHeaders/slider_ecommerce.png') no-repeat 7px 20px;
}

.slide-3 {
    background: url('../images/pageHeaders/slider_keyBoard.png') no-repeat 0 64px;
}

.slide-1, .slide-2, .slide-3 {
    background-size: 29%;
    height: 9.5em;
}

.top-button {
    position: relative;
    float: right;
    height: 32px;
    max-width: 132px;
    margin-top: 0;
    margin-right: 50px;
    margin-bottom: 0px;
    margin-left: 15px;
    border: 0;
    background: url("../images/3Up/button-tail.png") repeat-x left top;
    background-size: 12px;
    border-radius: 6px;
}

    /*
.top-button::before,
.top-button::after {
  content: ' ';
  position: absolute;
  top: 0;
  width: 12px;
  height: 81px;
}

.top-button::before {
  left: -8px;
  background: rgba(0, 0, 0, 0) url("../images/3Up/button-left.png") no-repeat scroll left top;
}
.top-button::after {
  right: -8px;
  background: rgba(0, 0, 0, 0) url("../images/3Up/button-right.png") no-repeat scroll right top;
}
*/

    .top-button a {
        color: #fff;
        padding-right: 12px;
        font-size: 11px;
        text-decoration: none;
        text-transform: uppercase;
        padding: 5px 12px 28px 10px;
        letter-spacing: -1px;
        line-height: 3em;
    }

/*header banner*/
.pageHeading {
    color: #464646;
    font-size: 30px;
    letter-spacing: -1px;
    line-height: 1.2em;
    padding-top: 10px;
    padding-bottom: 10px;
}

#slogan {
    margin: 12px 0 0 0;
    color: #fff;
    text-shadow: 1px 1px #3e7901;
}

#slogan {
    margin-top: 50px;
}

.in-header {
    background: rgba(0, 0, 0, 0) url("../images/pageHeaders/enter.png") no-repeat;
    background-size: cover;
    background-position: 25%;
    min-height: 10em;
}

#slogan h2 {
    font-family: 'MyriadPro-Regular',Sans-Serif;
    color: #fff;
    font-size: 1.3rem;
    text-transform: uppercase;
    font-weight: 600;
}

    #slogan h2 span {
        color: #262626;
    }

#slogan p {
    font-size: 0.73rem;
}

.small-text-center {
    text-align: center;
}

.aboutus h3, .testimonials h3, .contactus h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    line-height: 1.2em;
    margin-bottom: 15px;
    color: #417c01;
    font-weight: normal;
}

.aboutus p, .testimonials p, .contactus p, .contactus label {
    font-size: 0.72rem;
    font-weight: normal;
}

.testimonials a {
    color: #428301;
    outline: none;
}

.contactus {
    padding-bottom: 48px;
}

span.column {
    /* margin: 0; */
    padding: 0;
}

table tr:nth-of-type(even) {
    background-color: transparent !important;
}

tbody, tfoot, thead {
    /*   border: 1px solid #f1f1f1;*/
    background: transparent;
}

table, table.table {
    border: none;
}

    table td, table.table td {
        padding: 2px;
        height: 25px;
        text-align: left;
        vertical-align: top;
    }

caption, tbody td, tbody th {
    padding: 0;
}
/*form style*/
.textboxes {
    background-color: #fff;
    color: #464646;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #cbcbcb;
    padding: 3px 3px;
    margin-bottom: .5rem;
}

[type=text], [type=password], [type=date], [type=datetime], [type=datetime-local], [type=month], [type=week], [type=email], [type=tel], [type=time], [type=url], [type=color], [type=number], [type=search], textarea, select {
    font-weight: normal;
    height: auto;
    /* padding: .5rem; */
}

.textboxes:focus {
    border: 1px solid #4F9C01;
}

.radios label {
    padding-right: 1em;
}

.radios label, .checks label {
    padding-left: .3em;
}

input[type=checkbox] {
    padding: 0;
    vertical-align: sub;
}

.checks label {
    vertical-align: baseline;
    margin-top: 0;
    padding-top: 0;
    text-indent: -5px;
}


.btnClearEnquiry, .btnSendEnquiry {
    padding: 0;
    margin: 0;
    outline: 0;
    border: none;
}

button::-moz-focus-inner {
    padding: 0;
    border: none;
}

.btnClearEnquiry, .btnSendEnquiry {
    display: inline-block;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1.2em;
    background: url(../images/link4-bgd.gif) left top repeat-x;
}

    .btnClearEnquiry:hover, .btnSendEnquiry:hover {
        color: #82b704;
    }

    .btnClearEnquiry span, .btnSendEnquiry span {
        display: block;
        background: url(../images/link4-left.gif) no-repeat left top;
    }

        .btnClearEnquiry span span, .btnSendEnquiry span span {
            padding: 10px 22px;
            background: url(../images/link4-right.gif) no-repeat right top;
        }



/* ===[ Information boxes ]=== */
.info-box, .success-box, .notification-box, .error-box {
    padding: 10px 10px 10px 70px;
    margin: 10px;
    position: relative;
    display: block;
    min-height: 45px;
    font-size: 13px;
}

.info-box {
    color: #64757f;
    background: #e1f2fc url(../images/icon-info.png) 10px 10px no-repeat;
    border: 1px solid #68a2cf;
}

.success-box {
    color: #697a58;
    background: #eeffdd url(../images/icon-download.png) 10px 10px no-repeat;
    border: 1px solid #a3c159;
}

.notification-box {
    color: #79725b;
    background: #fef7e0 url(../images/icon-note.png) 10px 10px no-repeat;
    border: 1px solid #e6c555;
}

.error-box {
    color: #7e6c6c;
    background: #feebeb url(../images/icon-error.png) 10px 10px no-repeat;
    border: 1px solid #ff9999;
}








/* ===[ ie10 ]=== */
.ie10 header nav li a {
    font-size: 14px;
}

.ie10 #slogan h2 {
    font-size: 22px;
}

.ie10 #faded ul.slides li a, .ie10 #faded4Up ul.slides li a {
    font-size: 14px;
}

.ie10 #faded ul.pagination li a span, .ie10 #faded4Up ul.pagination li a span {
    font-size: 18px;
}

.ie10 .banners li {
    font-size: 18px;
}

.ie10 .price {
    font-size: 24px;
}

.ie10 h1 {
    font-size: 32px;
}


.callTo {
	margin-top: -350px;
	font-size: 1.1em;
	color: #ffffff;
	text-shadow: -1px 0 1px #111111, 0 1px 1px #111111,-1px 0 1px #111111, 0 1px 1px #111111;
}


/*** CONTENT SECTION ****/
.box {
    background: #fff url("../images/box-tail.gif") repeat-x scroll left top;
}

    .box .border-right {
        background: rgba(0, 0, 0, 0) url("../images/border-right.gif") repeat-y scroll right top;
    }

    .box .border-bot {
        background: rgba(0, 0, 0, 0) url("../images/border-bot.gif") repeat-x scroll left bottom;
    }

    .box .border-left {
        background: rgba(0, 0, 0, 0) url("../images/border-left.gif") repeat-y scroll left top;
    }

    .box .left-top-corner {
        background: rgba(0, 0, 0, 0) url("../images/left-top-corner.gif") no-repeat scroll left top;
    }

    .box .right-top-corner {
        background: rgba(0, 0, 0, 0) url("../images/right-top-corner.gif") no-repeat scroll right top;
    }

    .box .right-bot-corner {
        background: rgba(0, 0, 0, 0) url("../images/right-bot-corner.gif") no-repeat scroll right bottom;
    }

    .box .left-bot-corner {
        background: rgba(0, 0, 0, 0) url("../images/left-bot-corner.gif") no-repeat scroll left bottom;
        width: 100%;
    }

    .box .inner {
        padding: 15px 24px 26px;
        position: relative;
    }

    .box h3 {
        color: #fff;
        margin-bottom: 30px;
    }

    .box h3, .box h4 {
        font-family: Arial,Helvetica,sans-serif;
        text-shadow: 1px 1px 0 #417c01;
    }

p {
    margin-bottom: 10px;
    line-height: 2em;
    font-size: .75em;
    font-weight: normal;
}

.price {
    color: #7fb504;
    display: block;
    font-size: 28px;
    letter-spacing: -1px;
    line-height: 1.2em;
    padding-bottom: 10px;
    text-align: center;
}

.aligncenter {
    text-align: center;
}

.link1 {
    display: inline-block;
    padding-right: 7px;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 1px;
    line-height: 1.2em;
    background: url(../images/link1-right.png) no-repeat right top;
}

.link1, .link3, .link4 {
    font-family: 'MyriadPro-Regular',Sans-Serif;
    text-shadow: 1px 1px 0px #000000;
    filter: dropshadow(color=#000000, offx=1, offy=1);
}

    .link1 span {
        display: block;
        padding-left: 6px;
        background: url(../images/link1-left.png) no-repeat left top;
    }

        .link1 span span {
            padding: 12px 14px;
            background: url(../images/link1-bgd.png) left top repeat-x;
            font-size: 10px;
        }

/*** FOOTER SECTION ****/
.callout.secondary {
    background: url(../images/aside-tail.gif) repeat-x left top #131313;
}

.callout {
    border: none;
    margin: 0;
}

.inside.text-center {
    padding: 26px 0px;
    font-size: 85%;
}

ul.subnav.vertical {
    font-size: 85%;
    font-weight: bold;
}

.subnav.vertical > li:first-child {
    font-weight: bold;
}

.subnav.vertical > li, .menu.vertical > li a {
    color: #e5e5e5;
}

.subnav.vertical > li {
    line-height: 1.667em;
}

.greenText {
    color: #82b704;
}

.fleft {
    float: left;
    font-size: .75rem;
}

ul.subnav li a {
    color: #fff;
}

.nav-menu > li > a:hover, .subnav.vertical > li a:hover, .menu.vertical > li a:hover {
    color: #82b704;
}


.subnav.vertical > li a:hover {
    -webkit-box-shadow: inset 0px 3px 1px 0px #151515;
    box-shadow: inset 0px 3px 1px 0px #151515;
    background: #171717;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

.is-drilldown-sub {
    background: url(../images/aside-tail.gif) repeat-x left top #131313;
}

.js-drilldown-back::before {
    margin-top: 12px;
    border-color: transparent #82b704 transparent transparent;
}

.is-drilldown-submenu-parent > a::after {
    border-color: transparent transparent transparent #82b704;
}

.row.expanded.callout.secondary li a {
    font-size: 12px;
    padding: 4px;
}

.row.expanded.callout.secondary li:first-child {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.menu > li > a {
    display: block;
}

/*
.dropdown.menu .has-submenu.is-down-arrow>a::after {
	top: 2px;
	border-color: #82b704 transparent transparent;
}*/

/* Small only */
@media screen and (max-width: 39.9375em) {
}

/* Medium and up */
@media screen and (min-width: 40em) {
    /************* NAVIGATION ************/
    .top-bar {
        height: 91px;
        line-height: 91px;
        padding: 0;
    }


        .top-bar, .top-bar ul {
            background: url(../images/header-box-tail.gif) repeat-x left top;
        }

    .nav-menu > li {
        height: 81px;
    }

        .nav-menu > li a {
            background: url(../images/divider.gif) repeat-y left top;
            color: #fff;
            font-family: 'MyriadPro-Regular',Sans-Serif;
            text-transform: uppercase;
            font-size: 10px;
        }

        .nav-menu > li.first a {
            background: none;
        }

        .nav-menu > li.current a {
            color: #82b704;
        }

    .subnav.vertical > li a {
        background: none;
        text-transform: none;
    }

    li.is-submenu-item.is-dropdown-submenu-item {
        height: auto;
    }

    .small-text-center {
        text-align: left;
        padding-left: 0;
    }

    .foot-div {
        background: url(../images/line-ver.gif) repeat-y;
    }

        .foot-div.hide-div {
            background: none;
        }

    .slide-container {
        min-height: 16em;
        border-radius: 5px;
        max-width: 982px;
        margin: 5px;
        margin-top:15px;
    }

    .orbit-bullets {
        height: 16.2em;
        background: url(../images/3Up/pagination-bg2.png) no-repeat left top;
        background-size: 81% 100%;
    }

    .column.slide-nav {
        height: 5.3em;
        margin: 0;
        padding: 0;
        padding-right: 12px;
        line-height: 1em;
        border: none;
        margin-left: 5px;
    }

    .row.large-2.column.slide-nav {
        background: rebeccapurple;
    }

    .slide-1, .slide-2, .slide-3 {
        height: 14.7em;
    }

    .slide-1 {
        background: url('../images/pageHeaders/slider_frustrated.png') no-repeat 13px 25px;
        background-size: 35%;
        height: 15.96em;
    }

    .slide-2 {
        background: url('../images/pageHeaders/slider_ecommerce.png') no-repeat 13px 25px;
        background-size: 35%;
        height: 15.96em;
    }

    .slide-3 {
        background: url('../images/pageHeaders/slider_keyBoard.png') no-repeat 13px 60px;
        background-size: 40%;
        height: 15.96em;
    }

    .orbit-bullets button {
        border: none;
        background-position: left 85px;
        background-repeat: repeat-y;
        background-color: transparent;
        background-size: 100% 205%;
        height: 5.313em;
    }

        .orbit-bullets button.is-active, .orbit-bullets button:hover {
            background-color: transparent;
        }

    button a, button.is-active a {
        font-size: 100%;
    }

    h3 {
        font-size: 1.17rem;
    }

    .callTo {
        margin-top: -28px;
        font-size: 1em;
        font-weight: bold;
    }
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
}

/* Landscape only */
@media screen and (min-width: 44.250em) and (max-width: 47.499em) {
    .nav-menu > li a {
        font-size: 15px;
    }

    h3 {
        font-size: 1rem;
    }

    .in-header {
        background: none;
    }
}
/* Large and up */
@media screen and (min-width: 43em) {
    .in-header {
        background: none;
    }

    .nav-menu > li a {
        font-size: 13px;
    }
}

/* Large 760 and up */
@media screen and (min-width: 47.500em) {
    .in-header {
        background: none;
    }


    .nav-menu > li a {
        font-size: 18px;
    }
}

/* Large and up */
@media screen and (min-width: 64em) {
    .nav-menu > li a {
        font-size: 20px;
    }

    .foot-div.hide-div {
        background: url(../images/line-ver.gif) repeat-y;
    }

    .orbit-bullets button {
        height: 5.313em;
    }

    .slide-container {
        margin: auto;
        margin-top:15px;
    }

    .link1 span span {
        font-size: 15px;
    }
}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {
}
