/* #Page Styles
===========================================================================================   */
	
	.container {
		width: 959px;
		margin: 0 auto;
		padding: 0;
		text-align: left;	
		position: relative;
		box-sizing: border-box;
	}
	.container::after {
	    content: '';
	    display: table;
	    clear: both;
	}
	
	.conpadd { padding: 60px; }
	.horpadd { padding: 0 60px; }
	
	#main {
		line-height: 21px;
		width: 100%;
	}
	

/* Header
===========================================================================================   */		

	header {
		height: 143px;
		padding-top: 35px;
	}
	header .menu {
		display: none;
	}
	
	header span {
		float: right;
	}
	header .logo {
		height: 123px !important;
		float: left;
		outline: 0;
	}
	

	
	

/* Top navigation
===========================================================================================   */	
	
	#topnavi {
		float: right;
		margin-top: 50px;
	}
	#topnavi ul  {
		margin: 0;
		padding: 0;
		display: flex;
	}
	#topnavi li {
		list-style: none;
		float: left;
		position: relative;
		display: inline;
		flex-grow: 1;
		margin: 0 ;
		padding: 0 ;
		
	}
	#topnavi a {
		display: block;
		text-align: center;
		color: #484848;
		padding: 0 15px;
		margin: 0 1px;
		text-decoration: none;
		box-sizing: border-box;
		font-size: 15px;
		line-height: 28px;
		white-space: nowrap;
		text-transform: uppercase;
		border-radius: 4px;
		
	}
	#topnavi a:hover,
	#topnavi a:focus,
	#topnavi .on,
	#topnavi ul li:hover a {
		text-decoration: none;
		background: #000;
		color: #fff;
	}


/* Search form
===========================================================================================   */	
	
	#searchform {
	    background-color: #f8f8f8;
	    padding: 40px 0 30px;
	    width: 100%;
	}
	
	.formgroup {
	     margin: 20px -12px;
	    padding: 0;
	    display: flex;
	    flex-wrap: wrap;
	}
	.formgroup p {
		width: calc( 33.3% - 24px);
	    margin: 0 12px 24px;
	    padding: 0 ;
	    list-style: none;
	    overflow: hidden;
	    float: left;
	}
	.b_home .formgroup p { width: calc( 25% - 24px); }
	
	label {
	    display: block;
	    color: #666;
	    margin-bottom: 5px;
	    font-size: 14px;
	}
	
	#searchform input, 
	#searchform select {
	    width: 100%;
	    padding: 10px;
	    border: 1px solid #ddd;
	    background-color: #fff;
	    
	}
	
	#searchform h2:before {
	    font-weight: 300;
	    font-family:  'Font Awesome 5 Pro';	
	    content: '\f002';
	    margin-right: 15px;
	}
	
  .select2-container .select2-selection--multiple {
		border: 1px solid #ccc;
		line-height: 1.3;
		background: url('data:image/svg+xml;utf8,<svg fill="%23666" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px top 7px, linear-gradient(#f6f6f6 0%, #fff 100%);
		padding: 5px 30px 10px 5px;
		min-height: 42px;
		
    }
    .select2-container .select2-search--inline .select2-search__field { 
	    font: 15px/1.3 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
		color: #777;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #e9e9e9;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-top: 5px;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
		margin: -1px 0 0 0;
		display: block;
    }
    .select2-results__option--selectable { 
	    text-align: left;
	    padding-left:10px;
    }
  
	.select2-selection__clear { display: none}
	
	.select2-container .select2-search--inline .select2-search__field {
		display: inline;
	} 
	

	
	
/* Introduction Page
===========================================================================================   */		
	
	.intropage {
	    margin: 40px -12px;
	    padding: 0;
	    display: flex;
	    flex-wrap: wrap;
	}
	
	.intropage li {
	    width: calc( 25% - 24px);
	    margin: 0 12px 24px;
	    padding: 0 ;
	    list-style: none;
	    overflow: hidden;
	    float: left;
	}
	
	.intropage img  {
		width: 100%;
	}
	
	
/* Details Page*
===========================================================================================   */	

	.imgcontainer {
      width: 70%;
      max-width: 400px;
      margin: 0 auto 30px;
      overflow: hidden;

    }
    
    .colors {
	 	display: flex;
	    flex-wrap: wrap;
	    background: linear-gradient(#f6f6f6 0%, #fff 100%);
	    border: 1px solid #ccc;
	    margin-bottom: 15px;
	    padding: 20px;
	    border-radius: 4px;
    }
    .colors p {
	    width: 50%;
	    text-align: center;
    }

    .colors p small {
	    display: block;
		cursor: pointer;
		width: 50px;
		margin: 0 auto;
	    text-align: center;
	    background: #143581;
	    padding: 1px 5px;
	    color: #fff;
	    margin-top: 5px;
	    border-radius: 4px;
	    text-transform: uppercase;
    }
    .colors p small:hover {
	    background: #000;
    }
	.clr-alpha, .clr-alpha div, .clr-field button, .clr-preview:before, .clr-swatches button { border-radius: 4px; }
	
	.dz-size { display: none}
	  
	
/* Standard CMS
===========================================================================================   */


	.fullwidth {
		width: 100vw;
		position: relative;
		left: 50%;
		right: 50%;
		margin: 0 -50vw;
		color: #fff;
	}	
	
	.fullwidth a, .fullwidth h2, .fullwidth h3 { color: #fff; }		
	
	
	.docs {
		margin: 0;
		padding: 0;
	}
	.docs li{
		margin: 0;
		padding: 0;
		clear: left;
		list-style: none;
	}
	.docs a{
		padding: 0 0 10px;
		float: left;
		text-decoration: none 
	}
	
	.docs span{
		float: left;
		padding: 3px 0 0 20px;
		color: #999;
		font-size: 11px;
	}
	.docs a:before {
		color: #1f5d44;
		font: bold 20px/1 'Font Awesome 5 Pro';
		margin-right: 10px;
		text-decoration: none;
		content: '\f016';
	}
	
	.jpeg:before, 
	.jpg:before, 
	.gif:before, 
	.png:before, 
	.bmp:before, 
	.tif:before, 
	.tiff:before  { content: '\f1c5' !important; }

	.doc:before, 
	.docx:before, 
	.docm:before  { content: '\f1c2' !important; }

	.xls:before, 
	.xlsx:before, 
	.xlsm:before  { content: '\f1c3' !important; }

	.ppt:before, 
	.pptx:before, 
	.pptm:before  { content: '\f1c4' !important; }

	.pdf:before  { content: '\f1c1' !important; }
		

	
	
	
	#sitemap,
	#sitemap ul{
		margin: 0;
		padding: 0 0 0 20px;
		
	}
	#sitemap  a {
		display: block;
		text-decoration: none;
		font-weight: bold;
		color: #666;
		padding: 2px 0 2px 18px;
	}
	#sitemap  a:hover { 
		color: #000;
	}

	#sitemap ul a {
		font-weight: normal;
	}
	#sitemap li {
		border-left: 1px solid #CDCDCD;
		background: url(/_img/layup/sitemapli.gif) no-repeat 0 .5em;
		list-style: none;
	}
	
	.paging {
		float: right;
		margin: 0;
		padding: 15px 0 0;
	}
	.paging li {
		float: left;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.paging li a {
		display: block;
		margin: 0 0 0 1px;
		padding: 2px 0;
		width: 20px;
		text-align: center;
		text-decoration: none;
		color: #666;
		background: #eaeaea;
		line-height: 1.3em;
	}
	
	.paging li a:hover, .paging li .on{
		background: #363636;
		color: #fff;
	}
	
	.paging .next a, .paging .last a, .paging .back a, .paging .first a {
		padding: 2px 7px !important;
		width: auto !important;
	}
	.pagenumbers {
		float: left;
		padding-top: 15px;
	}
	

	#cmsForm button{
		float: right;
	}
	.contactCheck {
		position: absolute; 
		left: -9999px;
	}
	
	.tab { display: none}
	.tab legend {
		font-size:30px;
		margin-bottom: 30px;}
	
	#tab1 { display: block}
	
	button[type="button"].backbut {
		background: #8f8f8f;
		margin-right: 20px;
	}
	#cmsForm button[type="button"].backbut:after { display: none}


	
	/* Extras */
	
	.hidden {
		position: absolute; 
		left: -9999px; 
	}
	.hand {
		cursor: pointer;
	}
	.textleft {
		text-align: left !important;
	}
	.textcenter {
		text-align: center !important;
	}
	.textright {
		text-align: right !important;
	}
	.right {
		float: right;
		width: calc(50% - 30px);
	}
	.left {
		float: left;
		width: calc(50% - 30px);
	}
	
	
	
/* Text Editor Styles
===========================================================================================   */	
	
	
	.largetext {
		font-size: 24px;
		line-height: 1.1;
	}
	
	.highlight {
		color: #8b1d57;
		font-weight: bold;
	}
	
	.imgleft,
	.imgright {
		border: 1px solid #d7d7d7;
	}
	.imgleft {
		margin: 0 10px 10px 0; 
		float: left;	
	}
	.imgright {
		margin: 0 0 10px 10px; 
		float: right;	
	}
	
		
	
	.bg_1 { background-color: #fff ; color: #000 }
	.bg_2 { background-color: #e39a46 ; color: #fff }
	.bg_3 { background-color: #5f5f5f ; color: #fff }
	.bg_4 { background-color: #e5e5e5 ; color: #606060  }
	.bg_5 { background-color: #d9733a ; color: #fff }
	
	
	.bg_1, .bg_2, .bg_3, .bg_4, .bg_5 { padding: 20px}
	
	.bg_1 h2, .bg_4 h2,
	.bg_1 h3, .bg_4 h3 { color: #000 ;}
	
	.bg_2 a,  .bg_3 a, .bg_5 a,
	.bg_2 h1, .bg_3 h1, .bg_5 h1,
	.bg_2 h2, .bg_3 h2, .bg_5 h2,
	.bg_2 h3, .bg_3 h3, .bg_5 h3 { color: #fff;}
	
	

/* #Firefox Styles
===========================================================================================   */

	@-moz-document url-prefix() {
	
	}	
		

	


/* #Media Queries
===========================================================================================   */

	body:before {  position: fixed; z-index: 99999999; background: #fff; }




/* More than 1500 
===========================================================================================   */
@media only screen and (min-width: 1500px)  {
	
	body:before { content: '1500+';}
	
	.container { width: 1500px; } 
	
	/* Max Font Size */
	h1 { font-size: 50px; }
	h2 { font-size: 40px; }
	h3 { font-size: 30px; }
	


	
}



/* Less than 1500 
===========================================================================================   */
@media only screen and (max-width: 1499px)  {
	
	body:before { content: '<1500';}
		
	.container { width: 1350px; }
	
	/* Adjusted Font Size */
	h1 { font-size: calc(35px + 0.5vw); }
	h2 { font-size: calc(30px + 0.5vw); }
	h3 { font-size: calc(25px + 0.5vw); } 	
	
}



/* All less than 1350
===========================================================================================   */
@media only screen and (max-width: 1350px)  {
	
	body:before { content: '<1350';}
		
	.container { width: 1200px; } 
	
}


/* All less than 1200
===========================================================================================   */
@media only screen and (max-width: 1200px)  {
		
	body:before { content: '<1200';}
	
	.container  { width: 100%; }
	
}





/* All less than 980
===========================================================================================   */
@media only screen and (max-width: 980px)  {
	
	
	body:before { content: '<980';}
	
	
	#cmsForm #contact_details { height: 150px; }
	.right, .left { float: none !important; width: 100%; }
	
	header {
		height: 103px;
		padding-top: 15px;
	}
	header .logo {
		height: 93px !important;}
	
	header .menu {
		display: block;
		position: fixed;
		right: 20px;
		top: 20px;
		z-index: 999999;
		text-decoration: none;
		color: #333;
	}
	header .menu:before {
		font: bold 30px/1 'Font Awesome 5 Pro';
		content: '\f0c9';	
		background: rgba(255,255,255,0.8);
		padding: 3px 4px;
		box-sizing: border-box;		
	}
	
	
	
	#topnavi {
		position: absolute;
		box-sizing: border-box;
		z-index: 10;
		top: 103px;
		left: 0;
		width: 100%;
		height: 0;
		margin: 0;
		padding-top: 20px;
		overflow: hidden;
		border: none;
		transition: height 0.7s;
		background: #f8f8f8;
    }
    
    #quicksearch div {
		transition: opacity 0.7s; 
    }
        
    


   .out #topnavi {
    	display: block;
        height: 229px;
    }

    	
	#topnavi ul	{
		width: calc(100% - 60px);
		height: auto;
		margin: 0 30px;
		padding: 0 0 30px;
		text-align: left;
		overflow: hidden;
		background: none;
		display: block;
	}
	
	#topnavi ul li	{
		float: left;
		clear: both;
		width:100%;	
		position: relative;
		border-bottom: 1px solid #cccccc;
	}
	#topnavi ul li a	{
		float: left;
		clear: both;
		width: 100%;
		padding: 7px 30px;
		margin: 0;
		text-align: left;	
		box-sizing: border-box;
		border-radius: 0;
	}
	
	#topnavi ul ul {
		position: static;
	}
	
	#topnavi ul span {
		display: block;
	}
		#topnavi ul span:before {
		font-family: 'Font Awesome 5 Pro';
		content: '\f078';
		color: #333; 		
		font-size: 20px;
		position: absolute;
		right: 25px;
		top: 11px;
	}
	
	.intropage li {  width: calc( 50% - 24px) }
	
}



/* less than 768
===========================================================================================   */
@media only screen and  (max-width: 768px)  {
	
	body:before { content: '<768';}
	

	.conpadd {  padding: 50px 30px; }
	.horpadd { padding: 0 30px; }
	
	
	#cmsForm input[type="text"],
	#cmsForm input[type="password"],
	#cmsForm input[type="email"],
	#cmsForm textarea,
	#cmsForm select {
		width: 100%;
		box-sizing: border-box;
	}
	
	.paging  { float: none; display: flex; }
	.paging li { flex-grow: 1; }
	.paging li a { width: auto; min-width: 15px }
	.pagenumbers { display: none; }
	
	footer ul { width: 100%}
	

	td, tr {  display: block; }
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr + tr {  margin-top: 30px; }
    td {
        border: none;
        position: relative;
        padding-left: 50%;
        text-align: left;
        margin-bottom: 5px;
    }
	
	td:before {
	    content: attr(data-label);
	    position: absolute;
	    left: 10px;
	    top: 50%;
	    width: calc(50% - 20px);
	    transform: translateY(-50%);
	    font-weight: 400;
	}
    
    .formgroup p { width: calc( 50% - 24px); margin: 0 12px 12px;  }
    .b_home .formgroup p { width: calc( 100% - 24px); }
    
    
}



/* less than 480
===========================================================================================   */
@media only screen and  (max-width: 480px)  {
	
	body:before { content: '<480';}
	

	.formgroup p { width: calc( 100% - 24px); }
	
	.out #topnavi {
        height: 400px;
    }
    
    .colors p {
	    width: 100%; }
	
}

/* less than 320
===========================================================================================   */
@media only screen and  (max-width: 320px)  {
	
	body:before { content: '<320';}
	
}

/* iPhone X Portrait
===========================================================================================   */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){

	.conpadd {  padding: 30px 50px; }
  	.horpadd { padding: 0 50px; }  
  	#topnavi ul li a { padding-left: 50px}
  	header .menu {right: 50px; }

}

/* iPhone XS Max, XR */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
	
	.conpadd {  padding: 30px 50px; }
  	.horpadd { padding: 0 50px; }  
  	#topnavi ul li a { padding-left: 50px}
  	header .menu {right: 50px; }
  	
}

/* Animations for desktop only
===========================================================================================   */
@media only screen and  (min-width: 768px)  {
	
	#topnavi a,
	.colors p small,
	button[type="submit"], 
	button[type="button"] {
		transition: background .3s ease-in-out
	}
	
	input, textarea, button {  transition: color .3s, border .3s ease-in-out; }
	
}

 body:before { display: none} 

/* #Bootstrap grid for advance CMS editor
===========================================================================================   */
#main *,.cke_editable *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#main img,.cke_editable img{max-width:100%;height:auto}

.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;/* margin-right:-15px;margin-left:-15px */}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;/* padding-right:15px;padding-left:15px */}.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}@media (min-width:768px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}}@media (min-width:992px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}@media (min-width:1200px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}}


.row.rowbg { margin-right: 0; margin-left: 0;}