/*---RESET---*/
	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,
	pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,
	small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,
	form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,
	details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,
	summary,time,mark,audio,video{margin:0;padding:0;border:0;font-family:"tuffyregular";;vertical-align:baseline;}
	article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
	ol,ul{margin:0px;padding:0px;}
	blockquote,q{quotes:none;}
	blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
	table{border-collapse:collapse;border-spacing:0;}

	html{
		height: 100%;
		padding: 0;
		margin:0;
	}

	@font-face {
	    font-family: 'tuffyregular';
	    src: url('http://api.cabitech.co.za/assets/font/Tuffy-Regular.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal;

	}

	body{
		height: 100%;
		width: 100%;
		padding: 0;
		-webkit-touch-callout: none; 
		    -webkit-user-select: none; 
		     -khtml-user-select: none; 
		       -moz-user-select: none; 
		        -ms-user-select: none; 
	}

	input {
	    outline: none;
	}

	button{
		outline: none;
	}

	#mainBackground{
		height: 100%;
		width: 100%;
		padding: 0;
		background-color: gainsboro;
	}
/*---Loading---*/
	#loading {
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        position: fixed;
        display: block;
        z-index: 9999;
        background-color: gainsboro;
	}

	#loading-image {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    z-index: 100;
	    margin-left: -16px;
    	margin-top: -16px;
	}

	#loadingm {
        width: 450px;
        height: 450px;
        margin-top: 25px;
        left: 0px;
        display: block;
        z-index: 9999;
        background-color: gainsboro;
	}

	#loadingm-image {
	    position: relative;
	    top: 50%;
	    left: 50%;
	    z-index: 1;
	    margin-left: -16px;
    	margin-top: -16px;
	}
/*---Themes---*/
	/*---Theme 1---*/
		#navBar1{
			height: 30px;
			width: calc(100% - 20px);
			background-color: maroon;
			display: block;
			padding: 10px;
			box-shadow: 5px 10px 8px #888888;
		}
		
		#navLogo1{
			height: 62px;
			width: 200px;
			background-color: white;
			padding: 10px;
			box-shadow: 6px 39px 56px #888;
			z-index: 1001;
			position: absolute;
		}

		#menu{
			float: right;
			padding: 6px;
		}
	/*---Theme 2---*/
		#navBar2{
			height: 30px;
			width: calc(100% - 20px);
			background-color: white;
			display: block;
			padding: 10px;
			box-shadow: 5px 10px 8px #888888;
		}
		
		#navLogo2{
			height: 62px;
			width: 200px;
			background-color: white;
			margin-left: auto;
			margin-right: auto; 
			box-shadow: 6px 39px 56px #888;
			z-index: 1001;
			padding: 10px;
		}
	/*---Theme 3---*/
		#navBar3{
			height: 50px;
			width: 100%;
			background-color: white;
			display: block;
			box-shadow: 5px 10px 8px #888888;
		}
		
		#navhr{
			display: block;
		    border-style: solid;
		    border-width: 1.5px;
		    border-color:black;
		}

		#logo3{
			width: 100px;
			height: 23px;
			padding: 5px;
		}
	/*---Button---*/
		#b-r{
			float: left;
			padding: 5px 20px;	
		}

		#b-s{
			float: left;
			padding: 5px 54px;
			margin-left:21px;		
		}
	/*---Button 1---*/
		#bc{
			height: 29px;
			float: right;
		}

		#b-a{
			float: left;
			padding: 5px 41px;
			margin-left: 48px;
		}

		#b-n{
			float: left;
			padding: 5px 40px;
		}

		#b-o{
			float: right;
			padding: 5px 36px;
		}

		.btn1 {
		  border: none;
		  display: block;
		  text-align: center;
		  cursor: pointer;
		  outline: none;
		  overflow: hidden;
		  position: relative;
		  color: #fff;
		  font-weight: 700;
		  font-size: 15px;
		  background-color:maroon;
		  margin: 0 auto;
		  box-shadow: 0 5px 15px rgba(0,0,0,0.20);
		}

		.btn1 span {
		  position: relative; 
		  z-index: 1;
		}

		.btns1:after {
		  content: "";
		  position: absolute;
		  left: 0;
		  top: 0;
		  height: 490%;
		  width: 150%;
		  background: black;
		  -webkit-transition: all .5s ease-in-out;
		  transition: all .5s ease-in-out;
		  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
		  transform: translateX(-98%) translateY(-25%) rotate(45deg);
		}

		.btns2:after {
		  content: "";
		  position: absolute;
		  left: 0;
		  top: 0;
		  height: 490%;
		  width: 150%;
		  background: black;
		  -webkit-transition: all .5s ease-in-out;
		  transition: all .5s ease-in-out;
		  -webkit-transform: translateX(-85%) translateY(-25%) rotate(45deg);
		  transform: translateX(-85%) translateY(-25%) rotate(45deg);
		}

		.btn1:hover:after {
		  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
		  transform: translateX(-9%) translateY(-25%) rotate(45deg);
		}

		.link {
		  font-size: 20px;
		  margin-top: 30px;
		}

		.link a {
		  color: #000;
		  font-size: 25px; 
		}
	/*---Button 2---*/
		.btn2 {
			border: 1px solid lightgrey;
			background: none;
			border-radius: 5px;
		}
	/*---Button 3---*/	
/*---Main--*/
	#mc{
		width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}

	#ic{
		width: 460px;
		height: 500px;
		float: left;
	}

	#model{
		float: left;
	    width: 459px;
	    height: 500px;
	    margin-top: -475px;
	    z-index: 100;
	    position: absolute;
	}

	#container{
		width: 450px;
		height: 450px;
		overflow: auto;
		margin-left: 15px;
		margin-top: 15px;
	}

	h1{
		font-size: 15px;
	}

	input1{
		width: 262px;
		height: 18px;
		border: 1px solid lightgrey;
	}

	#poweredby{
		float: left;
	    height: 38px;
	    margin-top: -6px;
	    margin-left: -5px;
	}
	/*---Doors---*/	
	/*---Board---*/
		/*---Panel Info---*/

			#slb{
				float: left;
				display: inline-block;
				width: 540px;
				height: 70px;
			}

			#sl-l{
				float: left;
				width: 264px;
				height: 50px;
				display: block;
				border-right: 1px solid lightgrey;
				border-bottom: 1px solid lightgrey;
				margin-top: 25px;
			}

			#sl-r{
				float: left;
				width: 264px;
				height: 50px;
				display: block;
				margin-left: 10px;
				border-right: 1px solid lightgrey;
				border-bottom: 1px solid lightgrey;
				margin-top: 25px;
			}

			#cmb{
				width: 264px;
				height: 424px;
				float:left;
				margin-left: 9px;
				margin-top: 22px;
			}

			#cb{
				width: 264px;
				height: 392px;
				background-color: gainsboro;
				border: 1px solid lightgrey;
				overflow: hidden;
			}

			#cbi{
				width: 284px;
				height: 328px;
				overflow-y: scroll;
			}

			.cn {
				background-color: white;
			    position:absolute;
			    display:none;
			    padding: 2px 5px;
			    box-shadow: 0 5px 15px rgba(0,0,0,0.20);
			}

			.ib{
				display: inline-block;
				margin-top: 22px;
				float: left;
				width: 267px;
			}

			.ibt{
				float: left;
			}

			#ibb{
				float: right;
			    border: none;
			    background: none;
			    width: 28px;
			    cursor: pointer;
			}

			#ie{
				width: 264px;
				height: 260px;
				background-color: gainsboro;
				border: 1px solid lightgrey;
				overflow: hidden;
			}

			.ic {
			  display: inline-block;
			  position: relative;
			  font: 12px arial;
			}

			.suffix {
			  position: absolute;
			  left: 0;
			  top: 4px;
			  color: #000;
			  padding-left: 2px;
			  font: inherit;
			}
		/*---dropdown---*/
			.msl{
				margin-left: -4px;
				width: 264px !important;
			}
			.sl{
				width: 264px !important;
				border:1px solid lightgrey;
			}

			select {
			  -webkit-appearance: none;
			  -moz-appearance: none;
			  -ms-appearance: none;
			  appearance: none;
			  outline: 0;
			  box-shadow: none;
			  border: 0 !important;
			  background-image: none;
			  width: 100%;
			cursor: pointer;
			}

			/* Custom Select */
			.select {
			    position: relative;
			    display: flex;
			    width: 240px;
			    height: 20px;
			    overflow: hidden;
			}

			select {
			  flex: 1;
			  padding: 0 .5em;
			  cursor: pointer;
			}
			/* Arrow */
			.select::after {
			  content: '\25BC';
			  position: absolute;
			  top: 0;
			  right: 0;
			  padding: 4px 4px;

			  cursor: pointer;
			  pointer-events: none;
			  -webkit-transition: .25s all ease;
			  -o-transition: .25s all ease;
			  transition: .25s all ease;
			  font-size: 10px;
			}
			/* Transition */
			.select:hover::after {
			  color: maroon;
			}
		/*---Colours---*/
			.thumbgallery{
				float: left;
				border: 1px solid white;
			}

			.thumbgalleryimage{
				width: 86px;
				height: 86px;
				float: left;
				display: block;
				cursor: pointer;
			}

			.selected{
				width: 86px;
				height: 86px;
				float: left;
				display: block;
				border: 1px solid maroon;
				cursor: pointer;
			}

			.brandbar{
				width: 259px;
				height: 20px;
				background-color:white;
				color:#808080;
				padding-left: 5px;

			}

			.brandcontainer{
				display: flow-root;
				width:264px;
			}
		/*---Order List---*/

			#odm{
				width: 100%;
				height: calc(100vh - 587px);
				float: right;
			}

			#obt{
				width: 100%;
				height: 24px;
				float: left;
			}

			th{
				border: 2px solid lightgrey;
			}

			#nt{
				width: 50px;
			}

			#ctt{
				width: 120px;
			}

			#itt{
				width: 120px;
			}

			#ct{
				width: 352px;
			}

			#ht{
				width: 120px;
			}

			#qt{
				width: 50px;
			}

			#ot{
				width: 50px;
			}

			#pt{
				width: 120px;
			}

			#tpt{
				width: 120px;
			}

			#olib{
				width: 998px;
				height: calc(100vh - 622px);
				min-height: 110px;
				overflow: hidden;
				border-right: 1px solid lightgrey;
				border-left: 1px solid lightgrey;
				border-bottom: 1px solid lightgrey;
				background-color: gainsboro;
				float: left;
			}

			#oli{
				width: 1020px;
				overflow-y: scroll;
				height: calc(100% - 70px);
			}

			.ott1{
				background-color: lightgrey;
				text-align: center;
			}

			.ott2{
				background-color: white;
				text-align: center;
			}

			.nt{
				width: 51px;
				border-right: 2px solid gainsboro;
			}

			.ctt{
				width: 120px;
				border-right: 2px solid gainsboro;
			}

			.itt{
				width: 120px;
				border-right: 2px solid gainsboro;
			}

			.ct{
				width: 352px;
				border-right: 2px solid gainsboro;
			}

			.ht{
				width: 120px;
				border-right: 2px solid gainsboro;
			}

			.qt{
				width: 50px;
				border-right: 2px solid gainsboro;
			}

			.ot{
				width: 50px;
				border-right: 2px solid gainsboro;
			}

			.otb{
				border: none;
				background: none;
				width: 23px;
			}

			.pt{
				width: 120px;
				border-right: 2px solid gainsboro;
			}

			.tpt{
				width: 120px;
			}

			.qtt{
				width: 46px !important;
				border: none !important;
				margin-bottom: 1px;
				height: 20px;
			}
	/*---Curves---*/
/*---Overlays---*/
	/*---Nav---*/
		.or{
			border-radius: 10px;
		}
		/*---Drop Menu---*/
			.drop_menu{
				width: 125px;
				background-color: white;
				box-shadow: 0px 20px 30px #888888;
				overflow: hidden;
				margin-top: 50px;
			}

			.droplinks{
				float: left;
				height: 25px;
				border: 1px solid lightgrey;
				width: 125px;
				text-decoration: none;
				color: black;
				padding-top: 10px;
				padding-left: 10px;
				padding-left: 5px;
				cursor: pointer;
			}

			.droplinkstext{
				float:left;
				margin-left: 10px;
			}

			.droplinksimg{
				float:left;
				margin-top: -3px;
			}
		/*---Quotations---*/
			.qc{
		        width: 900px;
		        height: 583px;
		        background-color: white;
		        box-shadow: 0px 5px 20px #888888;
		        overflow: hidden;
		        margin-top: 20px;
		    }

		    #qb{
		        height: 30px;
		        width: 900px;
		        background-color: white;
		        border-bottom: 1px solid lightgrey;
		        }

	        #qbt{
                color: grey;
                font-size: 1.2em;
                font-weight: lighter;
                margin-top: 2px;
                text-align:center;
			}

			#qbtc{
			    background: none;
			    border: none;
			    width: 25px;
			    float: right;
			    margin-top: -18px;
			    margin-right: 10px;
			    cursor: pointer;
			}

			#qbtc{
			    background: none;
			    border: none;
			    width: 25px;
			    float: right;
			    margin-top: -18px;
			    margin-right: 10px;
			    cursor: pointer;
			}

			#qif{
				width: 860px;
				height: 490px;
				margin-top: 20px;
				margin-left: 20px;
			}

			#qp{
				height: calc(100% - 36px);
				width: 930px;
				background-color: white;
				border-top: 1px solid lightgrey;
				margin-top: 6px;
			}

			#qps{
				width: 250px;
			    height: 20px;
			    border: 1px solid lightgrey;
			    border-radius: 10px;
			    margin: 4px 0px 0px 5px;
			    float: left;
			}

			#qpsi{
				width: 220px;
				border: none;
				height: 19px;
				margin-left: 10px;
			}

			#qpsii{
				float: right;
				margin: 2px 4px 0px 0px;
				width: 15px;
			}

			#qpd{
			font-size: 10px;
			position: relative;
			display: inline-block;
			float: right;

			}

			#qpd select {
				outline: none;
				-webkit-appearance: none;
				-moz-appearance:none;
				display: block;
				margin: 0;
				width: 120px;
				height: 30px;
				transition: border-color 0.2s;
				border: none;
				border-radius: 5px;

				background: #fff;
				color: black;
				line-height: normal;
				font-family: inherit;
				font-size: 12px;
				line-height: inherit;
				cursor: pointer;
			}

			#qpd .arr {
			  background: #fff;
			  position: absolute;
			  right: 5px;
			  width: 50px;
			  pointer-events: none;
			  margin-right: 7px;
			}

			#qpd .arr:before {
			  content: '';
			  position: absolute;
			  top: 50%;
			  right: 0px;
			  margin-top: 12px;
			  pointer-events: none;
			  border-top: 5px solid black;
			  border-left: 5px solid transparent;
			  border-right: 5px solid transparent;
			}

			#qpd .arr:after {
			  content: '';
			  position: absolute;
			  top: 50%;
			  right: 28px;
			  margin-top: -5px;
			  pointer-events: none;
			  border-left: 6px solid transparent;
			  border-right: 6px solid transparent;
			}


			#qpds{
				width: 200px;
				height: 30px;
				float: left;
			}

			.qpth{
				table-layout: fixed;
				border: 2px solid lightgrey;
				cursor: pointer;
			}

			.qpth a {
				margin-left:13px;
			}


			#qpt{
				width: 862px;
				border-top: 2px solid lightgrey;
				table-layout: fixed;
				margin-left: 20px;
			}

			.qpts{
				height: 5px;
				border-left: 5px solid transparent;
				border-right: 5px solid transparent;
				float: right;
				margin-right: 5px;

			}

			#qpc{
				width: 860px;
				background-color: gainsboro;
				table-layout: fixed;
				margin-left: 20px;
				height: 450px;
				border-left: 1px solid lightgrey;
				border-right: 1px solid lightgrey;
				border-bottom: 1px solid lightgrey;
				overflow: hidden;
			}
		/*---Orders---*/
			.ci{
		        width: 900px;
		        height: 583px;
		        background-color: white;
		        box-shadow: 0px 5px 20px #888888;
		        overflow: hidden;
		        margin-top: 20px;
		    }

		    #cib{
		        height: 30px;
		        width: 900px;
		        background-color: white;
		        border-bottom: 1px solid lightgrey;
		        }

	        #cibt{
                color: grey;
                font-size: 1.2em;
                font-weight: lighter;
                margin-top: 2px;
                text-align:center;
			}

			#cibc{
			    background: none;
			    border: none;
			    width: 25px;
			    float: right;
			    margin-top: -18px;
			    margin-right: 10px;
			    cursor: pointer;
			}
		/*---Login---*/
			.lc{
		        width: 350px;
		        height: 190px;
		        background-color: white;
		        box-shadow: 0px 5px 20px #888888;
		        overflow: hidden;
		        margin-top: 20px;
		    }

		    #lcb{
		        height: 30px;
		        width: 350px;
		        background-color: white;
		        border-bottom: 1px solid lightgrey;
		        }

	        #lcbt{
                color: grey;
                font-size: 1.2em;
                font-weight: lighter;
                margin-top: 2px;
                text-align:center;
			}

			#lcbc{
			    background: none;
			    border: none;
			    width: 25px;
			    float: right;
			    margin-top: -18px;
			    margin-right: 10px;
			    cursor: pointer;
			}

			#lcl{
				list-style-type: none;
				margin-left: 20px;
			}

			#lcuti{
				width: 306px;
			}

			#lcpti{
				width: 306px;
			}

			.lci{

			}

			.lcrt{
				color: black;
				cursor: pointer;
			}
		/*---Logged In---*/
			.lic{
		        width: 350px;
		        height: 130px;
		        background-color: white;
		        box-shadow: 0px 5px 20px #888888;
		        overflow: hidden;
		        margin-top: 20px;
		    }

		    #licb{
		        height: 30px;
		        width: 350px;
		        background-color: white;
		        border-bottom: 1px solid lightgrey;
		        }

	        #licbt{
                color: grey;
                font-size: 1.2em;
                font-weight: lighter;
                margin-top: 2px;
                text-align:center;
			}

			#licbc{
			    background: none;
			    border: none;
			    width: 25px;
			    float: right;
			    margin-top: -18px;
			    margin-right: 10px;
			    cursor: pointer;
			}

			#licl{
				list-style-type: none;
				margin-left: 20px;
			}

			#licc{
				height: 56px;
				width: 56px;
				float: left;
				margin-left: 20px;
				margin-top: 20px;
			}

			#lict{
				float: left;
				font-size: 23px;
				margin-top: 33px;
				margin-left: 24px;
			}

			.checkmark__circle {
			  stroke-dasharray: 166;
			  stroke-dashoffset: 166;
			  stroke-width: 2;
			  stroke-miterlimit: 10;
			  stroke: gainsboro;
			  fill: none;
			  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
			}

			.checkmark {
			  width: 56px;
			  height: 56px;
			  border-radius: 50%;
			  display: block;
			  stroke-width: 2;
			  stroke: #fff;
			  stroke-miterlimit: 10;
			  box-shadow: inset 0px 0px 0px gainsboro;
			  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
			}

			.checkmark__check {
			  transform-origin: 50% 50%;
			  stroke-dasharray: 48;
			  stroke-dashoffset: 48;
			  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
			}

			@keyframes stroke {
			  100% {
			    stroke-dashoffset: 0;
			  }
			}
			@keyframes scale {
			  0%, 100% {
			    transform: none;
			  }
			  50% {
			    transform: scale3d(1.1, 1.1, 1);
			  }
			}
			@keyframes fill {
			  100% {
			    box-shadow: inset 0px 0px 0px 30px gainsboro;
			  }
			}
		/*---Saved Quotes---*/
		/*---Placing Order---*/
		/*---Company Info---*/
		/*---Register Company---*/
			.rcc{
		        width: 400px;
		        height: 383px;
		        background-color: white;
		        box-shadow: 0px 5px 20px #888888;
		        overflow: hidden;
		        margin-top: 20px;
		    }

		    #rccb{
		        height: 30px;
		        width: 400px;
		        background-color: white;
		        border-bottom: 1px solid lightgrey;
		        }

	        #rccbt{
                color: grey;
                font-size: 1.2em;
                font-weight: lighter;
                margin-top: 2px;
                text-align:center;
			}

			#rccbc{
			    background: none;
			    border: none;
			    width: 25px;
			    float: right;
			    margin-top: -18px;
			    margin-right: 10px;
			    cursor: pointer;
			}
		/*---Error Box---*/
		/*---After Order---*/
	/*---Doors---*/	
	/*---Board---*/
		/*---Board Extras--*/
			.be{
				background-color: white;
				height: 342px;
				width: 660px;
				box-shadow: 16px 16px 47px black;
			}

			#bec{
				border: 1px solid lightgrey;
				height: 300px;
				width: 300px;
				margin: 20px;
				float: left;
			}

			#beb{
				width: 298px;
				height: 250px;
				float: right;
				margin-top: 20px;
				margin-right: 20px;
			}

			.boardExtrasText{
				font-size: 1em;
			}
		/*---Board Type---*/
		/*---Edging---*/
		/*---Board Info---*/
	/*---Curves---*/