.nav-bar {
    margin-top: 20px;
    margin-bottom: 20px;
}

article {
    padding-right: 10px;
}

.black-button {
    background-color: #000000;
    width: 30px;
    height: 30px;
    margin-right: 5px;
}

.red-button {
    background-color: #fd0000;
    width: 30px;
    height: 30px;
    margin-right: 5px;
}

.blue-button {
    background-color: #00c1ff;
    width: 30px;
    height: 30px;
    margin-right: 5px;
}

.black-button {
    background-color: #000000;
    width: 30px;
    height: 30px;
    margin-right: 5px;
}

/* SWAP */
#controls-container {
    /* height: 80px */
    /* background-image: url(https://pp.userapi.com/c638029/v638029131/33a3a/zmWSrbJK254.jpg); */
    /* background-color: #eee; */
}

#controls-container-2 {
    /* height: 80px */
    /* background-image: url(https://pp.userapi.com/c638029/v638029131/33a3a/zmWSrbJK254.jpg); */
    /* background-color: #eee; */
}

#controls-container-3 {
    /* height: 80px */
    /* background-image: url(https://pp.userapi.com/c638029/v638029131/33a3a/zmWSrbJK254.jpg); */
    /* background-color: #eee; */
}

#controls-container-4 {
    /* height: 80px */
    /* background-image: url(https://pp.userapi.com/c638029/v638029131/33a3a/zmWSrbJK254.jpg); */
    /* background-color: #eee; */
}

#controls-container-5 {
    /* height: 80px */
    /* background-image: url(https://pp.userapi.com/c638029/v638029131/33a3a/zmWSrbJK254.jpg); */
    /* background-color: #eee; */
}

#controls-container-6 {
    /* height: 80px */
    /* background-image: url(https://pp.userapi.com/c638029/v638029131/33a3a/zmWSrbJK254.jpg); */
    /* background-color: #eee; */
}

#controls-container-7 {
    /* height: 80px */
    /* background-image: url(https://pp.userapi.com/c638029/v638029131/33a3a/zmWSrbJK254.jpg); */
    /* background-color: #eee; */
}

#controls-container-8 {
    /* height: 80px */
    /* background-image: url(https://pp.userapi.com/c638029/v638029131/33a3a/zmWSrbJK254.jpg); */
    /* background-color: #eee; */
}

.controls-container:after {
    content: '';
    display: block;
    clear: both;
}

.control {
    /* position: relative */
    /* float: left */
    /* width: 10% */
    /* height: 50% */
}

.control-btn {
    width: 100%;
    height: 40px;

    /* border-radius: 50% */
    border: 2px solid#ededed;

    /* position: absolute */
    /* transform: translateX(-50%) translateY(-50%); */
    /* top: 50% */
    /* left: 50% */
    cursor: pointer;
    color: transparent;
    font-size: 15px;
    text-align: center;

    /* line-height: 28px */
    transition: all .3s;

    /* background-color: #7a6d6d; */
}

.control-btn:hover {
    background-color: rgba(98, 89, 89, .4);
    box-shadow: 0px 0 5px 3px #c4c4c4;
}

/* .control-btn:focus {
    background-color: rgba(98, 89, 89, .4);
    box-shadow: 0px 0 5px 3px #c4c4c4;
    border: 2px solid #fd0000;
} */
#images-container {
    //height: 220px;
    position: relative;
}

#images-container-two {
    //height: 220px;
    position: relative;
}

.image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: all .5s;
}

/* BRICKS */
.house-two-bricks-red-bg {
    background-image: url(images/house-two/house-two-red-brick.png);
}

.house-two-bricks-tan-bg {
    background-image: url(images/house-two/house-two-tan-brick.png);
}

.house-two-bricks-light-bg {
    background-image: url(images/house-two/house-two-light-brick.png);
}

/* FASCIAS */
.house-two-agate-grey-foil-f {
    background-image: url(images/house-two/fascia/fascia-agate.png);
}

.house-two-anthracite-grey-co-ex-f {
    background-image: url(images/house-two/fascia/fascia-anthracite-co-ex.png);
}

.house-two-anthracite-grey-foil-f {
    background-image: url(images/house-two/fascia/fascia-anthracite.png);
}

.house-two-black-foil-f {
    background-image: url(images/house-two/fascia/fascia-black.png);
}

.house-two-black-co-ex-f {
    background-image: url(images/house-two/fascia/fascia-black-co-ex.png);
}

.house-two-cream-foil-f {
    background-image: url(images/house-two/fascia/fascia-cream.png);
}

.house-two-irish-oak-foil-f {
    background-image: url(images/house-two/fascia/fascia-irish-oak.png);
}

.house-two-light-grey-f {
    background-image: url(images/house-two/fascia/fascia-light-grey.png);
}

.house-two-light-oak-f {
    background-image: url(images/house-two/fascia/fascia-light-oak.png);
}

.house-two-mahogany-foil-f {
    background-image: url(images/house-two/fascia/fascia-mahogany.png);
}

.house-two-rosewood-foil-f {
    background-image: url(images/house-two/fascia/fascia-rosewood.png);
}

.house-two-white-co-ex-f {
    background-image: url(images/house-two/fascia/fascia-white-co-ex.png);
}

.house-two-white-foil-f {
    background-image: url(images/house-two/fascia/fascia-white.png);
}

/* SOFFITS */
.house-two-agate-grey-foil-s {
    background-image: url(images/house-two/soffit/soffit-agate.png);
}

.house-two-anthracite-grey-co-ex-s {
    background-image: url(images/house-two/soffit/soffit-anthracite-co-ex.png);
}

.house-two-anthracite-grey-foil-s {
    background-image: url(images/house-two/soffit/soffit-anthracite.png);
}

.house-two-black-foil-s {
    background-image: url(images/house-two/soffit/soffit-black.png);
}

.house-two-black-co-ex-s {
    background-image: url(images/house-two/soffit/soffit-black-co-ex.png);
}

.house-two-cream-foil-s {
    background-image: url(images/house-two/soffit/soffit-cream.png);
}

.house-two-irish-oak-foil-s {
    background-image: url(images/house-two/soffit/soffit-irish-oak.png);
}

.house-two-light-grey-s {
    background-image: url(images/house-two/soffit/soffit-light-grey.png);
}

.house-two-light-oak-s {
    background-image: url(images/house-two/soffit/soffit-light-oak.png);
}

.house-two-mahogany-foil-s {
    background-image: url(images/house-two/soffit/soffit-mahogany.png);
}

.house-two-rosewood-foil-s {
    background-image: url(images/house-two/soffit/soffit-rosewood.png);
}

.house-two-white-co-ex-s {
    background-image: url(images/house-two/soffit/soffit-white-co-ex.png);
}

.house-two-white-foil-s {
    background-image: url(images/house-two/soffit/soffit-white.png);
}
/* CLADDING */
.house-two-no-cladding {
    background-image: url(images/house-two/cladding/cladding-none.png);
}
.house-two-white-foil-c {
    background-image: url(images/house-two/cladding/cladding-white-c.png);
}

.house-two-mahogany-foil-c {
    background-image: url(images/house-two/cladding/cladding-mahogany.png);
}

.house-two-blackgrain-foil-c {
    background-image: url(images/house-two/cladding/cladding-black.png);
}

.house-two-sherwood-foil-c {
    background-image: url(images/house-two/cladding/cladding-sherwood.png);
}

.house-two-rosewood-foil-c {
    background-image: url(images/house-two/cladding/cladding-rosewood.png);
}

.house-two-anthracite-grey-co-ex-c {
    background-image: url(images/house-two/cladding/cladding-anthracite.png);
}

.house-two-agate-grey-foil-c {
    background-image: url(images/house-two/cladding/cladding-agate.png);
}

.house-two-white-c {
    background-image: url(images/house-two/cladding/cladding-white.png);
}

.house-two-sand-c {
    background-image: url(images/house-two/cladding/cladding-sand.png);
}

.house-two-light-grey-c {
    background-image: url(images/house-two/cladding/cladding-light-grey.png);
}

.house-two-cream-foil-c {
    background-image: url(images/house-two/cladding/cladding-cream.png);
}

.house-two-light-blue-c {
    background-image: url(images/house-two/cladding/cladding-light-blue.png);
}

/* RAIN */
.house-two-anthracite-rain {
    background-image: url(images/house-two/rainwater/rainwater-anthracite.png);
}

.house-two-black-rain {
    background-image: url(images/house-two/rainwater/rainwater-black.png);
}

.house-two-brown-rain {
    background-image: url(images/house-two/rainwater/rainwater-brown.png);
}

.house-two-light-grey-rain {
    background-image: url(images/house-two/rainwater/rainwater-light-grey.png);
}

.house-two-white-rain {
    background-image: url(images/house-two/rainwater/rainwater-white.png);
}

.house-two-brick-swish-b {
    background-image: url(images/house-two/house-two-red-brick.png);
}

.house-two-brick-dark-b {
    background-image: url(images/house-two/house-two-tan-brick.png);
}

.house-two-brick-light-b {
    background-image: url(images/house-two/house-two-light-brick.png);
}

.image[data-active="active"] {
    opacity: 1;
}

.image[data-active-2="active-2"] {
    opacity: 1;
}

.image[data-active-3="active-3"] {
    opacity: 1;
}

.image[data-active-4="active-4"] {
    opacity: 1;
}

/* HOUSE TWO */
.image[data-active-5="active-5"] {
    opacity: 1;
}

.image[data-active-6="active-6"] {
    opacity: 1;
}

.image[data-active-7="active-7"] {
    opacity: 1;
}

.image[data-active-8="active-8"] {
    opacity: 1;
}
.image[data-active-9="active-9"] {
    opacity: 1;
}
.image[data-active-10="active-10"] {
    opacity: 1;
}

.agate-grey {
    background-image: url('images/swatches/foil-agate-grey.png');
}

.anthracite-grey-foil {
    background-image: url('images/swatches/foil-anthracite-grey.png');
}

.anthracite-grey-co-ex {
    background-image: url('images/swatches/co-ex-anthracite-grey.png');
}

.black-co-ex {
    background-image: url('images/swatches/co-ex-anthracite-black.png');
}

.black-foil {
    background-image: url('images/swatches/foil-black.png');
}

.cream-foil {
    background-image: url('images/swatches/foil-cream.png');
}

.irish-oak-foil {
    background-image: url('images/swatches/foil-irish-oak.png');
}

.light-grey-co-ex {
    background-image: url('images/swatches/co-ex-light-grey.png');
}

.light-oak-foil {
    background-image: url('images/swatches/foil-light-oak.png');
}

.mahogany-foil {
    background-image: url('images/swatches/foil-mahogany.png');
}

.rosewood-foil {
    background-image: url('images/swatches/foil-rosewood.png');
}

.white-co-ex {
    background-image: url('images/swatches/co-ex-white.png');
}

.white-foil {
    background-image: url('images/swatches/foil-white.png');
}

.anthracite-r {
    background-image: url('images/swatches/rainwater-anthracite-grey.png');
}

.black-r {
    background-image: url('images/swatches/rainwater-black.png');
}

.brown-r {
    background-image: url('images/swatches/rainwater-brown.png');
}

.light-grey-r {
    background-image: url('images/swatches/rainwater-grey.png');
}

.white-r {
    background-image: url('images/swatches/rainwater-white.png');
}
.white-c {
    background-image: url('images/swatches/cladding-white.png');
}
.cream-c {
    background-image: url('images/swatches/cladding-cream.png');
}
.sand-c {
    background-image: url('images/swatches/cladding-sand.png');
}
.light-blue-c {
    background-image: url('images/swatches/cladding-light-blue.png');
}
.light-grey-c {
    background-image: url('images/swatches/cladding-light-grey.png');
}

.brick-swish-btn {
    background-image: url('images/swatches/red-brick.png');
}

.brick-dark-btn {
    background-image: url('images/swatches/tan-brick.png');
}

.brick-light-btn {
    background-image: url('images/swatches/light-brick.png');
}

.red:hover {
    box-shadow: 0px 0 5px 3px #ffffff;
}

.tooltip {
    border-color: transparent transparent #0a0a0a;
    background-color: #eeeeee;
    color: black;
}

.tooltip.top::before {
    border-color: #eeeeee transparent transparent;
}

.colour-text {
    line-height: 1.1;
    padding: 5px 0;
}

.swtch-titles {
}

h6.swatch-titles {
    padding-top: 5px;
    margin-bottom: 0;
    font-weight: 700;
}

#fascia-2 b,
#soffit-2 b,
#gutter-2 b,
#cladding-2 b,
#brick-2 b {
    color: #ff7100;
}

.red-border {
    border-top-width: 4px;
    border-left-width: 4px;
    border-right-width: 4px;
    border-bottom-width: 4px;
    border-color: #ff7100;
}