html {
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: HelveticaNeueLT-LightCond;
    letter-spacing: 1px;
}

h1:focus {
    outline: none;
}

.HelveticaNeueLTStd-HvCn {
    font-family: HelveticaNeueLTStd-HvCn;
    font-weight: normal;
    font-style: normal;
}

.container {
    width: 1080px;
    max-width: none !important;
    position: relative;
}

p {
    font-size: 1.8em;
}

.small-text {
    font-size:1em;
}

.padded-paragraph {
    line-height: 2em;
}

.heading-large {
    height: 226px;
    background-color: #2daae1;
}

.heading {
    height: 100px;
    background-image: url(../images/grey-bg.png);
}

hr {
    margin-top: 2px;
    margin-bottom: 5px;
}

.red {
    color: #e6455e;
}

.orange {
    color: #e18e2d;
}

.green {
    color: #aea711;
}

.aqua {
    color: #24eebe;
}

.lblue {
    color: #2daae1;
}

.grey {
    color: #58585a;
}

.dgrey {
    color: #4d4d4d;
}

.white {
    color: #ffffff;
}

.vlarge {
    font-size: 2.1em;
}

.large {
    font-size: 1.6em;
}

.paddingT10 {
    padding-top: 10px;
}

.paddingT5 {
    padding-top: 5px;
}

.paddingT25 {
    padding-top: 25px;
}

.paddingT30 {
    padding-top: 30px;
}
.paddingL10 {
    padding-left:10px;
}

.padding-none {
    padding:0;
}
.section-padding {
    padding:30px 0;
}
.column-padding {
    padding-top:20px;
}
.greybg {
    background-color: #58585a;
}

.content {
    padding-top: 50px;
}

.ultra-bold {
    font-weight: 800;
}

.light {
    font-weight: 400;
}

.techlist li {
    height: 30px;
    vertical-align: top;
    margin-top: 10px;
    font-size: 1.2em;
}

.rthumb {
    position: absolute;
    left: 10px;
    top: 74px;
    z-index: 1;
}

.lineheight1 {
    line-height: 1em;
}

.greybg .title {
    color: #fff;
    margin: 45px 0 0 50px;
}

.lblue-column {
    position: absolute;
    right: 50px;
    top: 0;
    width: 500px;
    background-color: #d9f0fa;
    z-index: -1;
}

/* Top header bar section*/
header {
    height: 60px;
}
/* Top header bar section*/

/* Nav bar section*/
.affix {
    position: fixed;
    top: 0;
    width: 100%;
}

.navbar {
    height: 100px;
    border: none;
    background-color: rgba(0, 0, 0, 0.6);
    margin-bottom: 0;
}

.navbar.solid {
    background-color: rgba(0, 0, 0, 1);
    transition: background-color 1s ease 0s; /* Transition effect to make it fade in (optional) */
}

.navbar-brand {
    float: left;
    padding: 28px 15px 0 0;
    font-size: 18px;
    line-height: 20px;
    height: 50px;
}

.navbar-default .navbar-nav > li > a, .navbar-default .navbar-text {
    color: #fff;
    letter-spacing: 2px;
}
 .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    color: #2daae1;
    letter-spacing: 2px;
}
.navbar-nav > li > a {
    padding:5px 10px;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    background-color:transparent;
    color:#ffffff;
}
.navbar-nav > li > .dropdown-menu {
    margin-top:16px;
}
.navbar .navbar-nav .open .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.6);
    color:#ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color:#ffffff;
}
.navbar-wrapper {
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
    z-index: 20;
}

.footer {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 1);
    color: white;
    height: 30px;
    text-align: right;
    padding: 4px 10px 0px 0px;
}

.round-outline > li {
    margin: 10px;
    border-radius: 10px;
    border: 2px solid #FFF;
}

.round-outline > li:hover {
    border: 2px solid #2daae1;
}

    .round-outline > li > a {
        color: #FFF !important;
    }

        .round-outline > li > a:hover {
            color: #2daae1 !important;
        }

/* End Navbar section*/

/* Carousel section */
.carousel {
    height: 701px;
    margin-bottom: 0;
}

    .carousel h1 {
        font-size: 3em;
    }

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    height: 701px;
    width: 100%;
    border-top: 100px solid #FBF9FA !important;
}

.carousel .item {
    height: 701px;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    width: 100%;
    left: 0;
    right: 0;
    top: 95px;
    color: #2daae1;
}

.carousel-caption-tagline p {
    font-weight: normal;
    font-style: normal;
    font-family: HelveticaNeueLTStd-HvCn;
}

.carousel-caption-tagline em {
    color: #676767;
    font-family: HelveticaNeueLT-LightCond;
    font-weight: 700;
}

.carousel-caption h1 {
    font-size: 6em;
}

.black-bg {
    background-color: rgba(0,0,0,.6);
    padding: 10px;
    margin: 10px;
}

#myCarousel .btn-primary {
    background-color: #2daae1;
    letter-spacing: 1px;
    font-size: 2em;
    transition: all 400ms ease-in-out 0s;
}

    #myCarousel .btn-primary:hover {
        background-color: #fff;
        color: #2daae1;
        letter-spacing: 1px;
        font-size: 2em;
    }
/* End Carousel section */

/* Customise section*/
#customise {
    height: 1356px;
    border-top: 10px solid #fff;
}

    #customise .heading-large {
        background-image: url(../images/customise/bg.png);
    }

    #customise .lblue-column {
        height: 1120px;
    }

    #customise .whitetriangle {
        position: absolute;
        top: 0;
        z-index: 1;
        left: 50%;
        margin-left: -30px;
    }

    #customise .imacscreen {
        position: absolute;
        top: -100px;
        right: 40px;
        z-index: 2;
    }

    #customise .keyboardmouse {
        position: absolute;
        top: 350px;
        right: 0;
        z-index: 2;
    }

    #customise .ipad {
        position: absolute;
        top: 150px;
        right: 285px;
        z-index: 3;
    }

    #customise .domainname {
        position: absolute;
        top: 480px;
        right: 70px;
        z-index: 2;
    }

    #customise .colourscheme {
        position: absolute;
        top: 630px;
        right: 70px;
        z-index: 2;
    }

    #customise .editablepages {
        position: absolute;
        top: 870px;
        right: 70px;
        z-index: 2;
    }

    #customise .iconbadge {
        position: absolute;
        right: 0;
        top: 150px;
        z-index: 3;
    }

    #customise .title {
        position: absolute;
        width: 400px;
        top: 50px;
        left: 50px;
        z-index: 2;
    }

    #customise .textblock1 {
        position: absolute;
        left: 50px;
        top: 80px;
        z-index: 3;
        width: 300px;
    }

    #customise .textblock2 {
        position: absolute;
        left: 50px;
        top: 500px;
        z-index: 3;
        width: 400px;
    }

    #customise .textblock3 {
        position: absolute;
        left: 50px;
        top: 650px;
        z-index: 3;
        width: 350px;
    }

    #customise .textblock4 {
        position: absolute;
        left: 50px;
        top: 900px;
        z-index: 3;
        width: 200px;
    }

    #customise .line1 {
        position: absolute;
        left: 50px;
        top: 525px;
        z-index: 1;
    }

    #customise .line2 {
        position: absolute;
        left: 50px;
        top: 710px;
        z-index: 1;
    }

    #customise .line3 {
        position: absolute;
        left: 50px;
        top: 960px;
        z-index: 1;
    }
/* End Customise section*/

/* UXdesign section*/
#uxdesign .heading-large {
    background-image: url(../images/ux-design/bg.png);
}

#uxdesign {
    height: 1097px;
}

    #uxdesign .lblue-column {
        height: 970px;
    }

    #uxdesign .title {
        position: absolute;
        width: 300px;
        top: 50px;
        left: 50px;
        z-index: 2;
    }

    #uxdesign .textblock1 {
        position: absolute;
        left: 50px;
        top: 420px;
        z-index: 3;
        width: 250px;
    }

    #uxdesign .textblock2 {
        position: absolute;
        left: 50px;
        top: 517px;
        z-index: 3;
        width: 300px;
    }


    #uxdesign .ipad {
        position: absolute;
        top: -160px;
        right: 0;
        z-index: 1;
    }

    #uxdesign .postitnote {
        position: absolute;
        top: 50px;
        left: 20px;
        z-index: 1;
    }

    #uxdesign .pencilsharpener {
        position: absolute;
        top: 30px;
        left: 195px;
        z-index: 2;
    }

    #uxdesign .videos {
        position: absolute;
        top: 310px;
        right: 70px;
        z-index: 2;
    }

    #uxdesign .searchnavigation {
        position: absolute;
        top: 430px;
        right: 70px;
        z-index: 2;
    }

    #uxdesign .iconbadge {
        position: absolute;
        left: 400px;
        top: 120px;
        z-index: 3;
    }

    #uxdesign .line1 {
        position: absolute;
        left: 50px;
        top: 480px;
        z-index: 1;
    }

    #uxdesign .line2 {
        position: absolute;
        left: 50px;
        top: 578px;
        z-index: 1;
    }
/* End UXdesign section*/

/* Ecommerce section*/
#ecommerce .heading-large {
    background-image: url(../images/ecommerce/bg.png);
}

#ecommerce {
    height: 926px;
}

    #ecommerce .title {
        position: absolute;
        width: 400px;
        top: 50px;
        left: 50px;
        z-index: 2;
    }

    #ecommerce .textblock1 {
        position: absolute;
        left: 50px;
        top: 50px;
        z-index: 3;
        width: 250px;
    }

    #ecommerce .textblock2 {
        position: absolute;
        left: 50px;
        top: 530px;
        z-index: 3;
        width: 160px;
    }

    #ecommerce .textblock3 {
        position: absolute;
        left: 300px;
        top: 530px;
        z-index: 3;
        width: 180px;
    }

    #ecommerce .textblock4 {
        position: absolute;
        left: 580px;
        top: 530px;
        z-index: 3;
        width: 180px;
    }

    #ecommerce .textblock5 {
        position: absolute;
        left: 850px;
        top: 530px;
        z-index: 3;
        width: 180px;
    }

    #ecommerce .macbook {
        position: absolute;
        top: -100px;
        right: 0;
        z-index: 1;
    }

    #ecommerce .mug {
        position: absolute;
        top: 110px;
        left: 300px;
        z-index: 2;
    }

    #ecommerce .shoppingcart {
        position: absolute;
        top: 350px;
        left: 50px;
        z-index: 1;
    }

    #ecommerce .payment {
        position: absolute;
        top: 350px;
        left: 300px;
        z-index: 1;
    }

    #ecommerce .customisedelivery {
        position: absolute;
        top: 350px;
        left: 580px;
        z-index: 1;
    }

    #ecommerce .managerorders {
        position: absolute;
        top: 350px;
        left: 850px;
        z-index: 1;
    }
/* End Ecommerce section*/

/* Personalisation section*/
#personalisation .heading-large {
    background-image: url(../images/personalisation/bg.png);
}

#personalisation {
    height: 1706px;
}

    #personalisation .title {
        position: absolute;
        width: 450px;
        top: 50px;
        left: 50px;
        z-index: 2;
    }

    #personalisation .textblock1 {
        position: absolute;
        left: 50px;
        top: 400px;
        z-index: 3;
        width: 200px;
    }

    #personalisation .textblock2 {
        position: absolute;
        left: 50px;
        top: 565px;
        z-index: 3;
        width: 250px;
    }

    #personalisation .textblock3 {
        position: absolute;
        left: 50px;
        top: 850px;
        z-index: 3;
        width: 350px;
    }

    #personalisation .line1 {
        position: absolute;
        left: 50px;
        top: 460px;
        z-index: 1;
    }

    #personalisation .line2 {
        position: absolute;
        left: 50px;
        top: 700px;
        z-index: 1;
    }

    #personalisation .line3 {
        position: absolute;
        left: 50px;
        top: 915px;
        z-index: 1;
    }

    #personalisation .imac {
        position: absolute;
        top: -140px;
        right: 0;
        z-index: 1;
    }

    #personalisation .decorationoptions {
        position: absolute;
        top: -10px;
        left: 0;
        z-index: 2;
    }

    #personalisation .personalise {
        position: absolute;
        top: 350px;
        right: 200px;
        z-index: 2;
    }

    #personalisation .adddesign {
        position: absolute;
        top: 580px;
        right: 0;
        z-index: 2;
    }

    #personalisation .getquote {
        position: absolute;
        top: 800px;
        right: 170px;
        z-index: 2;
    }

    #personalisation .imagefooter {
        position: absolute;
        top: 1080px;
        right: 0;
        z-index: 1;
    }
/* End Personalisation section*/

/* Product catalogue section*/
#productcatalogue .heading-large {
    background-image: url(../images/product-catalogue/bg.png);
}

#productcatalogue {
    height: 1176px;
}

    #productcatalogue .lblue-column {
        height: 950px;
    }

    #productcatalogue .title {
        position: absolute;
        width: 650px;
        top: 50px;
        left: 50px;
        z-index: 1;
    }

    #productcatalogue .textblock1 {
        position: absolute;
        left: 50px;
        top: 50px;
        z-index: 3;
        width: 400px;
    }

    #productcatalogue .textblock2 {
        position: absolute;
        left: 50px;
        top: 360px;
        z-index: 3;
        width: 250px;
    }

    #productcatalogue .textblock3 {
        position: absolute;
        left: 50px;
        top: 500px;
        z-index: 3;
        width: 180px;
    }

    #productcatalogue .textblock4 {
        position: absolute;
        left: 50px;
        top: 620px;
        z-index: 3;
        width: 200px;
    }

    #productcatalogue .textblock5 {
        position: absolute;
        left: 50px;
        top: 730px;
        z-index: 3;
        width: 200px;
    }

    #productcatalogue .textblock6 {
        position: absolute;
        left: 50px;
        top: 850px;
        z-index: 3;
        width: 400px;
    }

    #productcatalogue .line1 {
        position: absolute;
        left: 50px;
        top: 560px;
        z-index: 1;
    }

    #productcatalogue .line2 {
        position: absolute;
        left: 50px;
        top: 680px;
        z-index: 1;
    }

    #productcatalogue .catalogues {
        position: absolute;
        top: -160px;
        right: 0;
        z-index: 2;
    }

    #productcatalogue .brandscategories {
        position: absolute;
        top: 370px;
        right: 70px;
        z-index: 2;
    }

    #productcatalogue .stockavailability {
        position: absolute;
        top: 650px;
        right: 21px;
        z-index: 2;
    }

    #productcatalogue .iconbadge {
        position: absolute;
        right: 10px;
        top: 80px;
        z-index: 3;
    }
    /*End Product catalogue section*/

    /* Multiple section styles*/
    #customise .triangle, #uxdesign .triangle, #ecommerce .triangle, #personalisation .triangle, #productcatalogue .triangle {
        position: absolute;
        top: 204px;
        left: 50px;
        z-index: 2;
    }

#enquiry .triangle, #faq .triangle, #techinfo .triangle, #pricing .triangle {
    position: absolute;
    top: 99px;
    left: 50px;
    z-index: 1;
}
/* End Multiple section styles*/

/* Enquiry section */

.form-control {
    border-radius: 0;
    border: 1px solid #2daae1;
    box-shadow: none;
}

.form-group {
    position: relative;
}

#formname .line, #formemail .line, #formphone .line, #formcompany .line, 
#formmessage .line, #formacceptterms .line, #formmarketingpreferences .line {
    position: absolute;
    top: 10px;
    left: 15px;
    z-index: -1;
}

.marketing-label {
    margin: auto;
    padding: 10px;
}

.termsandconditions-description {
    padding-bottom: 10px;
}

.EnquirySuccessMessage {
    display: none;
}

.EnquiryErrorMessage {
    display: none;
}
/* End Enquiry section */

/* FAQs section */

#faq {
    min-height:450px;
}

#faq .table {
    margin:0;
}

#faq .table td{
    border:0;
}

.odd-group {
    background-color: #e6e6e6;
}
.even-group {
    background-color: #f2f2f2;
}

/* End FAQs section */

/* Tech Info section*/
#techinfo {
    height: 450px;
}

.techlist {
    list-style-image: url(../images/R-blue-small.png);
}
/* End Tech Info section*/

/* Pricing section */
#pricing {
    height: 1000px;
    font-size: 1.2em;
}

    #pricing .grey {
        height:100px;
        background-color: #58585a;
        color: #fff;
    }

    #pricing .blue {
        height: 100px;
        background-color: #42b2e3;
        color: #fff;
    }

    #pricing .dlblue {
        height: 100px;
        background-color: #102a35;
        color: #fff;
    }

    #pricing .dbluestripe {
        height: 30px;
        background-color: #67bae6;
        color: #000;
    }

    #pricing .lbluestripe {
        height: 30px;
        background-color: #84c8e6;
        color: #000;
    }

.discount-pricing {
    margin-top:-10px;
}

.dbluebg {
    background-color: #102a35;
}

#pricing .lbluebg {
    background-color: #c0e5f6;
}

#pricing .vlbluebg {
    background-color: #f5f5f5;
}

.table {
    font-size: 1.2em;
}

    .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
        vertical-align: middle;
    }
/* End Pricing section */


.accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings', serif; /* essential for enabling glyphicon */
    content: "\e252"; /* adjust as needed, taken from bootstrap.css */
    float: right; /* adjust as needed */
    color: #2caae0; /* adjust as needed */
}

.accordion-opened .accordion-toggle:after {
    content: "\e253";
}

.panel-group .panel {
    border-radius: 0;
}

.panel-default > .panel-heading {
    background-color: #d5eef9;
    border-radius: 0;
    border-color: #ddd;
    color: #2caae0;
    padding:0;
}

.panel-body {
    padding:0;
}

.panel-title {
    text-transform: uppercase;
    font-weight: bolder;
    font-size:18px;

}

.panel-group .panel + .panel {
    margin-top: 0;
}

.accordion-toggle {
    padding: 15px 30px;
    display:block;
}

.accordion-toggle:hover,
.accordion-toggle:focus
{
    text-decoration:none;
}

.blue-border {
    border-bottom: 1px solid #2daae1;
}

.width-100 {
    width:100%;
}

.checkbox {
    margin-top: 0;
    margin-bottom: 0;
}

.checkbox label.error {
    position:absolute;
    top:35px;
    left:0;
    font-weight:bold;
}