body {
    overflow                : hidden;
    font-family		: Tahoma,'Roboto', 'Helvetica', 'Arial', sans-serif !important;
    height					: 100%;
    width					: 100%;
} 

#menu {
    display:none;

    position:absolute;
            
    height:100%;
    width:80%; /* Properties need calculating as width - footer height */
    right:-80%;
    top:0;
    background: rgb(255,255,255);
    /*background: rgba(255,255,255,0.9);*/
    color:#000;
    z-index:1000;
    overflow:auto;
    box-shadow: 0 0 20px #000;
}

#footer {
    background: rgb(255,255,255);
    background: rgba(255,255,255,0.9);
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    z-index:100;
    text-align:right;
}

.footerContent {
    margin                  : 5px;
}

#scrim {
    width                   : 100%;
    height                  : 100%;
    position                : absolute;
    top                     : 0;
    left                    : 0;
    z-index                 : 999;
    background              : rgba(000,000,000,0.6);
}

#backgrounds, .zeroFont .tab-pane {
    font-size               : 0;
}

.zeroFont .tab-pane div {
    font-size               : 14px;
}

.backgroundHolder {
    /*width                   : 50%;*/
    overflow                : hidden;
    height                  : 140px;


    box-sizing              : border-box;
    -moz-box-sizing         : border-box;
    -webkit-box-sizing      : border-box;

    border                  : #fff solid 1px;

    -webkit-filter          : grayscale(100%); /* Safari 6.0 - 9.0 */
    filter                  : grayscale(100%);
    position                : relative;
    z-index                 : 10;
    background              : #ccc;

    /* Desktop Cursor */
    cursor                  : pointer;
}


    @media only screen and (min-width : 320px) {
        .backgroundHolder {
            height                  : 90px;
        }        
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
        .backgroundHolder {
            height                  : 140px;
        }  
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
        .backgroundHolder {
            height                  : 160px;
        }  
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        .backgroundHolder {
            height                  : 160px;
        }  
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
        .backgroundHolder {
            height                  : 250px;
        }  
    }




.backgroundHolder.active {
    -webkit-filter          : none; /* Safari 6.0 - 9.0 */
    filter                  : none;
}

.backgroundHolder.active::before {
    content:'';
    opacity                 : 0.6;
    height                  : 100%;
    width                   : 100%;
    background              : #000;
    opacity                 : 0.6;
    position                : absolute;
    top                     : 0;
    left                    : 0;
}

.backgroundHolder.active::after {
    content                 : '\E86C';
    font-family             : "Material Icons";
    position                : absolute;
    top                     : 10px;
    right                   : 15px;
    font-size               : 30px;
    color                   : #fff;
}

/* Patterns */

.patternHolder {
    /*width                   : 50%;
    
    display                 : inline-block;*/

    overflow                : hidden;

    box-sizing              : border-box;
    -moz-box-sizing         : border-box;
    -webkit-box-sizing      : border-box;

    border                  : #fff solid 1px;

    /*-webkit-filter          : grayscale(100%);
    filter                  : grayscale(100%);*/
    position                : relative;
    z-index                 : 10;
    background              : #fff;

    /* Desktop Cursor */
    cursor                  : pointer;
}

.patternHolder .patternTitle {
    position                : absolute;
    color                   : #000;
    padding                 : 5px;
    background              : #fff;
    bottom                  : 0;
    left                    : 0;
    z-index                 : 1;
}

.patternHolder.active {
    -webkit-filter          : none; /* Safari 6.0 - 9.0 */
    filter                  : none;
}

.patternHolder.active::before {
    content:'';
    opacity                 : 0.6;
    height                  : 100%;
    width                   : 100%;
    background              : #000;
    opacity                 : 0.6;
    position                : absolute;
    z-index                 : 10;
    top                     : 0;
    left                    : 0;
}

.patternHolder.active::after {
    content                 : '\E86C';
    font-family             : "Material Icons";
    position                : absolute;
    z-index                 : 20;
    top                     : 10px;
    right                   : 15px;
    font-size               : 30px;
    color                   : #fff;
}

.backgroundHolder.active.loading::after, 
.patternHolder.active.loading::after {
    content                 : '';
}

.spinner {
    position                : absolute;

    font-size               : 30px !important;
    z-index                 : 2000;
    top                     : 15px;
    right                   : 10px;
    
    color                   : #45a24f !important;
}


/* Overwrites */
.btn-icon {
    padding                 : 10px;
    margin                  : 0;
}

.nav-tabs {
    border-bottom           : none;
    text-transform          : uppercase;
    /*box-shadow              : 0 0 20px #000;*/
    position                : relative;
    z-index                 : 100;
    background              : #fff;
    overflow-y              : hidden;
    overflow-x              : auto;
    white-space             : nowrap;
    display                 : block;

}

.nav-tabs > li {
    display                 : inline-block;
    float                   : none;
}

.tab-content .nav-tabs {
    background              : #f6f6f6;
}

.tab-content {
    position                : relative;
}

.tab-content::before {
    -moz-box-shadow         : inset  0  8px 8px -8px rgba(000,000,000,0.6);
    -webkit-box-shadow      : inset  0  8px 8px -8px rgba(000,000,000,0.6); 
    box-shadow              : inset  0  8px 8px -8px rgba(000,000,000,0.6);
    position                : absolute;
    z-index                 : 100;
    top                     : 0;
    left                    : 0;
    width                   : 100%;
    height                  : 20px;
    content                 : "";
}


.nav-tabs .active {
    border-bottom           : 2px solid #009639;
}

.nav-tabs > li > a, .nav-tabs > li > a:hover, .nav-tabs > li > a:focus {
    color                   : #4a4a4a !important;
    display                 : block;
    height:41px;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    color                   : #009639 !important;
}



/* App specific */

        #mainImage, #slidingImage, #slidingPattern {
		  
		  -webkit-background-size	: cover;
		  -moz-background-size		: cover;
		  -o-background-size		: cover;
		  background-size			: cover;
		  position                  : absolute;
          /*width                     : 100%; /* Needs manually setting by screen width using JS */
        }

        #slidingPattern {
			background				: url() no-repeat left center fixed; 
			-webkit-background-size	: cover;
			-moz-background-size	: cover;
			-o-background-size		: cover;
			background-size			: cover;
            top                     : 0;
            z-index                 : 2;
			height                  : 100%;
        
		}

		#slidingImageHolder {
		    border-right            : #fff solid 1px;
		    -moz-box-sizing         : inherit;
		    -webkit-box-sizing      : inherit;
		    box-sizing              : border-box;
		    -moz-box-sizing         : border-box;
		    -webkit-box-sizing      : border-box;
		    width                   : 100%;
		    height                  : 100%;
		    width                   : 50%;
		    position                : absolute;
		    top                     : 0;
		    left                    : 0;
		    overflow                : hidden;
		}

		
		#slider {
			-webkit-appearance		: none;
			-moz-appearance			: none;
			position				: absolute;
			bottom					: 65px;
			z-index                 : 100;
			left					: -2px;
			background-color		: rgba(255,255,255,0.1);
			width					: 100%; 
        }
		
		/* Hide Selection Outline */
		#slider:focus { 
			outline					: none; 
        }
        #slider:active { 
			outline					: none;  
        }
		
		/**/
		
		#slider::-moz-range-track { 
          -moz-appearance:none;
            height:15px;
            width: 98%;
            background-color: rgba(255,255,255,0.1); 
            position: relative;
            outline: none;    
         }
        #slider::active { 
          border: none; 
          outline: none;
        }
        #slider::-webkit-slider-thumb {
            -webkit-appearance:none;
            width: 40px; height: 40px;   
            background: #fff;
            border-radius: 0;
           }
        #slider::-moz-range-thumb {
          -moz-appearance: none;
          width: 20px;
          height: 15px;
          background: #fff;
          border-radius: 0;
             }   
        #slider:focus::-webkit-slider-thumb {
            background: rgba(255,255,255,0.5);
           }
        #slider:focus::-moz-range-thumb {
            background: rgba(255,255,255,0.5);
        }


        /**/


        /* Alternative Slider */

.slide-control-group {
    margin: 20px 0;
    position:absolute;
    z-index:10000;
    width:100%;
    bottom:65px;
}
.slide-control {
    width: 100%;
    height:15px;
    position:relative;
    border:0;
    background:#fff;
    background: rgb(255,255,255);
    background: rgba(255,255,255,0.5);
    display:block;
    overflow: visible;
}
.slide-control-button {
    position:absolute;
    z-index:2;
    width:28px;
    height:29px;
    left:0;
    margin-left: -14px;
    top: -7px;
    bottom:-34px;
    background: #fff;
}

        /* SOCIAL ICONS */
			
.socialIcon {
    color:#fff !important;
    font-size:24px !important;
    line-height:1;
}

.btn:focus {
    outline:0 !important;
}

.socialIcon:hover {
    opacity:0.6;
}


.socialIcons .list-inline {
    margin-bottom	        : 0;
    padding			        : 0;
}

.socialIcons .list-inline li {
    padding			        : 0;
}

.socialIcon.danger {
    background		        : #cc2424 !important;
    color                   : #fff;
}
		
.socialIcon.danger:hover {
    background		        : #a91e1e !important;
}

.socialIcon.info {
    background		        : #5bc0de !important;
}
		
.socialIcon.info:hover {
    background		        : #31b0d5 !important;
}

.socialIcon.warning {
    background		        : #f0ad4e !important;
}
		
.socialIcon.warning:hover {
    background		        : #ec971f !important;
}
		
.socialIcon.danger,
.socialIcon.info,
.socialIcon.warning {
	cursor			        : pointer;
    float			        : left;
}
/* END SOCIAL ICONS */




/* Hide Grid */

.patternHolder.col-lg-1,
.patternHolder.col-lg-10,
.patternHolder.col-lg-11,
.patternHolder.col-lg-12,
.patternHolder.col-lg-2,
.patternHolder.col-lg-3,
.patternHolder.col-lg-4,
.patternHolder.col-lg-5,
.patternHolder.col-lg-6,
.patternHolder.col-lg-7,
.patternHolder.col-lg-8,
.patternHolder.col-lg-9,
.patternHolder.col-md-1,
.patternHolder.col-md-10,
.patternHolder.col-md-11,
.patternHolder.col-md-12,
.patternHolder.col-md-2,
.patternHolder.col-md-3,
.patternHolder.col-md-4,
.patternHolder.col-md-5,
.patternHolder.col-md-6,
.patternHolder.col-md-7,
.patternHolder.col-md-8,
.patternHolder.col-md-9,
.patternHolder.col-sm-1,
.patternHolder.col-sm-10,
.patternHolder.col-sm-11,
.patternHolder.col-sm-12,
.patternHolder.col-sm-2,
.patternHolder.col-sm-3,
.patternHolder.col-sm-4,
.patternHolder.col-sm-5,
.patternHolder.col-sm-6,
.patternHolder.col-sm-7,
.patternHolder.col-sm-8,
.patternHolder.col-sm-9,
.patternHolder.col-xs-1,
.patternHolder.col-xs-10,
.patternHolder.col-xs-11,
.patternHolder.col-xs-12,
.patternHolder.col-xs-2,
.patternHolder.col-xs-3,
.patternHolder.col-xs-4,
.patternHolder.col-xs-5,
.patternHolder.col-xs-6,
.patternHolder.col-xs-7,
.patternHolder.col-xs-8,
.patternHolder.col-xs-9,
.backgroundHolder.col-lg-1,
.backgroundHolder.col-lg-10,
.backgroundHolder.col-lg-11,
.backgroundHolder.col-lg-12,
.backgroundHolder.col-lg-2,
.backgroundHolder.col-lg-3,
.backgroundHolder.col-lg-4,
.backgroundHolder.col-lg-5,
.backgroundHolder.col-lg-6,
.backgroundHolder.col-lg-7,
.backgroundHolder.col-lg-8,
.backgroundHolder.col-lg-9,
.backgroundHolder.col-md-1,
.backgroundHolder.col-md-10,
.backgroundHolder.col-md-11,
.backgroundHolder.col-md-12,
.backgroundHolder.col-md-2,
.backgroundHolder.col-md-3,
.backgroundHolder.col-md-4,
.backgroundHolder.col-md-5,
.backgroundHolder.col-md-6,
.backgroundHolder.col-md-7,
.backgroundHolder.col-md-8,
.backgroundHolder.col-md-9,
.backgroundHolder.col-sm-1,
.backgroundHolder.col-sm-10,
.backgroundHolder.col-sm-11,
.backgroundHolder.col-sm-12,
.backgroundHolder.col-sm-2,
.backgroundHolder.col-sm-3,
.backgroundHolder.col-sm-4,
.backgroundHolder.col-sm-5,
.backgroundHolder.col-sm-6,
.backgroundHolder.col-sm-7,
.backgroundHolder.col-sm-8,
.backgroundHolder.col-sm-9,
.backgroundHolder.col-xs-1,
.backgroundHolder.col-xs-10,
.backgroundHolder.col-xs-11,
.backgroundHolder.col-xs-12,
.backgroundHolder.col-xs-2,
.backgroundHolder.col-xs-3,
.backgroundHolder.col-xs-4,
.backgroundHolder.col-xs-5,
.backgroundHolder.col-xs-6,
.backgroundHolder.col-xs-7,
.backgroundHolder.col-xs-8,
.backgroundHolder.col-xs-9 {
    padding:0;
}