body {
    margin: 0;
    padding: 0;
    font-family: sans-serif

}

.div-scroll-me {
    position: relative;
    width: auto;
    height: auto;
    z-index: 45
}

.element-absolute-centered {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.div-section-container {
    position: relative;
    width: auto;
    height: 100vh;
    z-index: 46
}

#section4 {
    /*height: 150vh !important*/
    /*min-height: 100vh;
    height: auto !important*/
}

.div-section4-normal {
    height: 688px !important
}

.div-section-background-1 {
    background-color: grey
}

.div-section-background-2 {
    background-color: darkgrey
}

.section-heading {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px
}

.section-sub-heading {
    font-size: 1.2rem;
    font-weight: bold
}

.div-section-text {
    margin: auto;
    left: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    text-align: center;

}

.section-text {
    margin-top: 10px
}

.text-vertically-and-horizontally-centered {
    display: table-cell;
    vertical-align: middle;
    text-align: center
}

.text-vertically-and-horizontally-centered.active {
    display: table-cell
}


/*navbar*/

#navbar-wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    z-index: 100
}

#navbar {
    position: relative;
    height: 100%;
}

.navbar-opaque {
    background-color: black
}

.navbar-transparent {
    background-color: rgba(0,0,0,0.2)
}


.div-navbar-link-container {
    position: relative;
    float: right;
    height: 100%;
    width: 10%;
    z-index: 100
}

.div-navbar-link-logo-container {
    position: relative;
    float: left;
    height: 100%;
    width: 12%
}

.div-navbar-link {
    width: 80%;
    height: 60%;
    text-align: center;
    z-index: 101;
    display: none
}

.div-navbar-link.hover {
    background-color: rgba(71,71,71,0.5);
}

.div-navbar-link.active {
    border-bottom: solid white 2px
}

.navbar-text {
    vertical-align: middle;
    color: white;
    font-family: sans-serif
}


/*home section*/

.div-home-hero-text {
    position: absolute;
    top: 100px;
    left: 30%;
    z-index: 60;
    height: 200px;
    width: 600px;
}

.home-hero-text {
    font-size: 3rem;
    font-weight: bold;
    line-height: 1.6;
    color: white
}

.home-hero-text-right {
    text-align: right
}

/*image slider*/

.home-slider-image {
    height: 688px;
    width: 1355px;
}

/*modal video*/

.modal-video-control {
    position: absolute;
    top: 500px;
    left: 0;
    right: 0;
    margin: auto;
    height: 100px;
    width: 100px;
    z-index: 60
}
/*centering absolutely positioned element (Shikkediel, 2015)*/

.modal-video-control-icon {
    height: 100px;
    width: 100px;
    opacity: 0.5
}

/*colour picker*/

.div-colour-picker-heading {
    top: 12%;
    width: 100%;
}

.div-colour-picker-container {
    top: 15%;
    width: 75%;
    height: 65%;
    margin: auto;
    position: relative
}

.div-colour-picker-image {
    top: 15%;
    position: relative;
    width: 100%;
    height: 320px;
}

.div-colour-picker-controls-container {
    position: relative;
    top: 12%;
    width: 100%;
    height: 85px;

}

.div-colour-picker-controls {
    position: relative;
    height: 70px;
    width: 420px;
    margin: 0 auto

}

.div-colour-picker-control-wrapper {
    position: relative;
    height: 70px;
    width: 70px;
    float: left
}

.colour-picker-control {
    height: 64px;
    width: 64px;
    margin: 1px;
    border-radius: 50%;
}

.colour-picker-control-hover {
    border: 2px solid black;
}

.colour-picker-control-active {
    border: 2px solid red;
}

.colour-picker-control-inner {
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

.colour-picker-control-black-silica {
    background-color: rgb(3,9,7)
}

.colour-picker-control-silver-metallic {
    background-color: rgb(173,182,189)
}

.colour-picker-control-storm-grey {
    background-color: rgb(66,98,123)
}

.colour-picker-control-blue-pearl {
    background-color: rgb(37,40,85)
}

.colour-picker-control-pure-red {
    background-color: rgb(170,30,41)
}

.colour-picker-control-wr-blue-pearl {
    background-color: rgb(0,74,159)
}
.colour-picker-image {
    
    width: 656px;
    height: 320px;
    opacity: 0;
    transition: all 0.5s ease

}

.colour-picker-image.active {
    opacity: 1
}

.div-colour-button-container {
    position: relative;
    margin: 0 auto;
    top: 17%;
    height: 45px;
    width: 320px
}


.div-colour-button {
    position: relative;
    text-align: center;
}



.div-colour-button-cta {
    float: left;
    height: 45px;
    line-height: 45px;
    background-color: black;
    width: 150px;
    color: white

}

.div-colour-button-specs {
    float: right;
    height: 39px;
    line-height: 39px;
    width: 144px;
    border: solid 3px black;
}

/*center text vertically using 'line-height'
(w3schools.com)
(Coyier, 2009)*/


/*features interactive image*/

.div-features-interactive-image {
    height: 60%;
    width: 60%;
    background-color: black;
    z-index: 47;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    bottom: 10%
}

/*overlay div on image (Farrugia, 2014)*/ 

.div-features-interactive-image-container {
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 48
}

.div-features-content {
    height: 100%;
    width: 100%;
    z-index: 50;
    bottom: 0px;
    position: absolute;
    display: none;
    cursor: crosshair
}

.div-features-content-container {
    height: 70%;
    width:80%
}

.features-deativate {
    position: absolute;
    opacity: 0;
    top: 0px;
    right: 0px;
    height: 30px;
    width: 30px
    
}

.features-interactive-image {
    position: absolute;
    width: 802px;
    height: 412px;
    z-index: 49
}

.features-interactive-image-icon {
    position: relative;
    z-index: 50;
    width: 50px;
    height: 50px
}

.features-interactive-image-icon-1 {
    top: 100px;
    left: 250px;
}

.features-interactive-image-icon-2 {
    top: 200px;
    left: 450px
}

.div-features-interactive-heading {
    top: 12%;
    width: 50%
}

.features-content-text {
    color: white
}



/*specs*/
.div-specs-container {
    top: 5%;
    width: 75%;
    height: 80%;
    margin: 0 auto;
    position: relative

}

.div-specs-header {
    height: 68px;
    width: 100%
}

.div-specs-keyfeatures-container {
    height: 550px;
    width: 100%;
    position: relative
}

.div-specs-top-level-menu-container {
    width: 100%;
    height: 60px;
    position: relative
}

.div-specs-top-level-menu {
    float: left;
    position: relative;
    height: 60px;
    width: 75%;
}

.div-specs-top-level-menu-side-panel {
    width: 12.5%;
    height: 100%;
    position: relative;
    float: left
    
}

.div-specs-top-level-menu-button-container {
    position: relative;
    float: left;
    width: 25%;
    height: 100%
}

.specs-content-close {
    position: relative;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    display: none
}

.div-specs-top-level-menu-button {
    height: 100%;
    width: 90%;
    background-color: rgba(0,0,0,0.7);
    display: table;
    color: white
}

.div-specs-top-level-menu-button.hover {
    background-color: rgba(0,0,0,0.5);
}

.div-specs-top-level-menu-button.active {
    background-color: gray;
    color: black;
    border: 3px solid black;
    border-collapse: collapse;
    font-weight: bold
    
}

.div-specs-content-container {
    display: none;
    margin: 0 auto;
    height: 485px;
    width: 70%;
}

.div-specs-content-container * {
    display: none
}

.div-specs-second-level-menu-container {
    height: 100%;
    width: 30%;
    float: left;
    padding-top: 50px;
    box-sizing: border-box
}

.div-specs-sub-menu {
    display: none;
    height: 100%;
    width: 100%;
}

div[class*= "specs-sub-menu-category"] {
    display: none;
    height: 100%;
    width: 100%
}

.div-specs-sub-menu-category-button {
    width: 100%;
    height: 70px !important;
    margin-bottom: 10px;
    display: table;
    background-color: rgba(0,0,0,0.7)
}

.div-specs-sub-menu-category-button.hover {
    background-color: rgba(0,0,0,0.5);
}

.div-specs-sub-menu-category-button.selected {
    background-color: gray;
    color: black;
    font-weight: bold;
    border: solid 3px black
}

.div-specs-sub-menu-category1 {
    /*background-color: red*/
}

.div-specs-sub-menu-category1-button {
    /*background-color: red;*/
}

.div-specs-sub-menu-category2 {
    /*background-color: black*/
}

.div-specs-sub-menu-category2-button {
    /*background-color: black*/
}

.div-specs-sub-menu-category3-button {
    /*background-color: darksalmon*/
}

.div-specs-sub-menu-category4-button {
    /*background-color: lightslategrey*/
}

div[class*= "specs-sub-menu-category"].active {
    display: table
}


.div-specs-second-level-menu {
    display: inline-block;
    zoom: 1;
    *display: inline;
    position: relative;
    width: 100%;
    height: 100%
}

.div-specs-second-level-menu1 {
    /*background-color: lightcyan;*/
}

.div-specs-second-level-menu2 {
    /*background-color: red;*/
}

.div-specs-second-level-menu3 {
    /*background-color: green;*/
}

.div-specs-second-level-menu4 {
    /*background-color: black;*/
}

.div-specs-second-level-menu5 {
    /*background-color: yellow;*/
}

.div-specs-second-level-content {
    height: 100%;
    width: 70%;
    float: left;
    box-sizing: border-box;
    padding: 50px 0 20px 70px
}

.div-specs-content-item {
    display: none;
    width: 100%;
    height: 100%;
}

div[class*=specs-content-category].active {
    display: block
}

/*div elements to associate content with sub-menu buttons*/
.div-specs-content-category1-item1 {
    /*background-color: blue*/
}

.div-specs-content-category1-item2 {
    /*background-color: orange*/
}

.div-specs-content-category2-item1 {
    /*background-color: green*/
}

.div-specs-content-category2-item2 {
    /*background-color: yellow*/
}

.div-specs-content-category3-item1 {
    /*background-color: darkgoldenrod*/
}

.div-specs-content-category3-item2 {
    /*background-color: goldenrod*/
}

.div-specs-content-category4-item1 {
    /*background-color: aliceblue*/
}

.div-specs-content-category4-item2 {
    /*background-color: plum*/
}

.table-specs-content {
    display: table;
    table-layout: fixed;
    width: 100%
}

#table-specs-keyfeatures {
    display: table;
    table-layout: fixed;
    width: 100%;
    position: relative;
    margin: 0 auto;
    margin-top: 5%;
    text-align: left
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    padding: 10px 0;
    font-size: 0.75rem;
    border-bottom: 1px black dashed
}
.col1 {
    width: 40%
}

.col-keyfeatures {
    width: 60%
}

.div-specs-heading {
    top: 10%;
    width: 50%
}

.div-specs-full-heading {
    position: absolute;
    width: 50%;
    height: auto;
    text-align: center;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 40px;
}