* { margin: 0px; padding: 0px;  -moz-box-sizing: border-box ; -webkit-box-sizing: border-box ; box-sizing: border-box ;  }

body  { font-size: 105%; line-height: 1.7em; font-family: "CreativeBlock BB","RedStateBlueState BB",arial ;  }

#cnt  { /* max-width: 1600px; */ min-width: 320px; margin: 0px auto;  }

a  { color: #000000 ;}

#head   { background: #333333 ;  padding: 10px ; }
#head > h1 ,
#head > h2  ,
#head > p  { color: #ffffff ; text-align: right ; font-weight: 500;}
#head > h1  { margin: 0 0 5px ; }
#head > h1 i { display: block ; margin: 0 0 5px ; }
#head > p  { display: none;}

#head  nav {  margin: 10px -10px -10px ; background: #CC0000 ; color: #ffffff ; position: relative;}
#head  nav ul { list-style-type: none ; }
/*
#head  nav .level-0 h2  { display: none ; width: 38px; line-height: 38px; border: 1px solid #000000; text-indent: -5555px; background: url(i/menu.png) 50% 50% no-repeat scroll; }
#head  nav .level-0 ul  { display: inline-block ; }
#head  nav .level-0 li.home  { display: none ; width: 38px; line-height: 38px; border: 1px solid #000000; text-indent: -5555px; background: url(i/house.png) 50% 50% no-repeat scroll; background-size: contain ; padding: 0px;}
#head  nav .level-0 li.menu  { display: none ; width: 38px; line-height: 38px; border: 1px solid #000000; text-indent: -5555px; background: url(i/menu.png) 50% 50% no-repeat scroll; background-size: contain ; padding: 0px;}
*/

#head  nav h2    { display: none ; clear: both ; }
#head  nav ul    { clear: both ; display: inline ; }
#head  nav ul.tools    { position: absolute; right: 0 ; top: 0 ;  }
#head  nav ul li   {  display: inline-block ; line-height: 40px; padding: 0px 10px 0px  ; border-right: 1px solid rgba(255,255,255,0) ; cursor: pointer; }
#head  nav ul li.on ,
#head  nav ul li:hover   { background-color: rgba(255,255,255,1) ; color: rgba(0,0,0,1) ; }
#head  nav ul li:last-of-type   {  border-right-width: 0px ; }
#head  nav div    { display: none ; }

#head  nav div.level-0    { display: inline-block ;}
#head  nav div.level-0 h2    { }
#head  nav div.level-0 ul { }
#head  nav div.level-0 ul li.menu { display: none;  }
#head  nav div.level-1.on    { display: inline-block ; }
#head  nav div.level-1 h2   {  display: inline-block ; line-height: 40px; padding: 0px 10px 2px 40px ; background: url(i/play.png) 00% 50% no-repeat scroll ; cursor: pointer; }
#head  nav div.level-1.on h2   {  background-image: url(i/play-down.png) ; }
#head  nav div.level-1 ul   {  position: absolute; display: none ; background: #cccccc; z-index: 12;  max-width: 440px;}
#head  nav div.level-1.on ul   {  display: block ; }
#head  nav div.level-1 ul li   {  display: block ; line-height: 38px; padding: 1px 40px 0px 40px ; background: url(i/hex.png) 00% 50% no-repeat scroll; border-bottom: 1px solid rgba(0,0,0,0.4) ; cursor: pointer; }
#head  nav div.level-1 ul li.home   { display: none;  background-image: url(i/house.png) ; color: #000000; }
#head  nav div.level-1 ul li.star   {  background-image: url(i/star.png) ; color: #000000; }
#head  nav div.level-1 ul li.arrow   {  background-image: url(i/arrow.png) ; color: #000000; padding-top: 0px; border-top: 3px double rgba(0,0,0,0.4); }
#head  nav div.level-1 ul li.active   {  background-color: #666666 ;  color: #cccccc; padding-top: 0px; border-top-width: 2px; }
#head  nav div.level-1 ul li.sub   {   padding: 1px 40px 0px 50px ; background: transparent; border-bottom: 1px solid rgba(0,0,0,0.4) ; cursor: pointer; }
#head  nav div.level-1 ul li.sub.active    {   background: #666666 ; }


#head  ul.bread  { display: block ; clear: both ; background: rgba(255,255,255,0.1); margin: 10px -10px -10px; padding: 0.5em 10px;}
#head  ul.bread li   { display: inline-block ; line-height: 1.2em; padding: 0.35em 0.5em 0.35em 0px ; cursor: pointer; color: rgba(255,255,255,0.4); }
#head  ul.bread li i  { margin: 0 5px 0 0px ; }
#head  ul.bread li:nth-of-type(1) i  { margin-left: 0px ; }
#head  ul.bread li:hover { opacity: 1; color: rgba(255,255,255,1); }


.inc_bread  { padding: 0px ;}
.inc_bread .box  { padding: 0px ;margin: 0 ;}
.inc_bread .box ul.bread  { display: block ; clear: both ;  margin: 0px -10px -10px; padding: 0.35em 0.5em 0.85em 0px ;}
.inc_bread .box ul.bread li   { display: inline-block ; line-height: 1.2em; padding: 0.35em 0.5em 0.35em 0px ; cursor: pointer; color: rgba(255,255,255,0.4); }
.inc_bread .box ul.bread li i  { margin: 0 5px 0 0px ; }
.inc_bread .box ul.bread li:nth-of-type(1) i  { margin-left: 0px ; }
.inc_bread .box ul.bread li:hover { opacity: 1; color: rgba(255,255,255,1); }


#head  nav div ol    { list-style-type: none ;  background: transparent;  }
#head  nav div ul li.breadcrumbs    { display: none ; list-style-type: none ;  background: transparent; padding: 0px;  }
#head  nav div ul li.breadcrumbs ol li   { display: inline-block ; line-height: 40px; width: 38px; height: 38px; overflow: hidden ; border: 1px solid rgba(0,0,0,0.4) ; padding: 0px  ; margin: 0px; background: transparent; cursor: pointer; }
#head  nav div ul li.breadcrumbs ol li.home   { background: url(i/house.png) 50% 50% no-repeat scroll;cursor: pointer; text-indent: -5555px; }
#head  nav div ul li.breadcrumbs ol li.rolledup   { display: none; background: url(i/dots.png) 50% 50% no-repeat scroll;cursor: pointer; text-indent: -5555px;  }
#head  nav div ul li.breadcrumbs ol li.arrow   {  float: right ; text-indent: -5555px; }
#head  nav div ul li.breadcrumbs ol li.current   { display: none; line-height: 38px; width: auto; height: 38px; overflow: visible ; padding: 0px 5px ; position: relative; top: -14px; background-color: #666666 ;  color: #cccccc; }

#cnt { position: relative; z-index: 15; }
#side  { position: absolute; position: fixed; top: 0px; left: 0px; background: #cccccc; bottom: 0px; width: 240px ; z-index: 10; padding: 100px 5px 0px }
#side h2  { border-bottom: 1px solid #666666; padding: 0px 0px 0.325em ; margin: 0px 0px 0.65em ; }
#side h2:hover { text-decoration: underline; cursor: pointer ;}
#side ul  { padding: 0px 0px 1ex; margin: 0px 0px 1ex; list-style-type: none;}
#side ul li { padding: 0 0 0.25em ; line-height: 1.2em ; }
#side ul li:hover { text-decoration: underline; cursor: pointer ;}

.lorem  { padding-bottom: 10px; }

.row  { display: flex ;}
.row.row-wrap  { flex-flow: row wrap  ;}
.row.row-0 { position: static ;top: -3em ; }
.row.row-0 ,
.row.row-1 ,
.row.row-2 ,
.row.row-3  { display: none ; }
.row.row-0 .box ,
.row.row-1 .box ,
.row.row-2 .box ,
.row.row-3 .box { background-color: rgba(255,255,255,1) ; }

.row.close  { text-align: right; overflow: hidden ; display: block ; position: absolute; right: 0.5em ; top: auto ;}
.row.close p { float: right ; line-height: 38px; width: auto;  cursor: pointer ; overflow: hidden ; padding: 0px ; }

.box  { width: 33.333333%;  background: #696969 ; border: 1px solid #ffffff ;  padding: 0.5em 0.5em 3em ; position: relative ; }
.box .box  {  padding-bottom: 10px ; }
.box.span2  { width: 66.66666%; }
.box.span3 ,
.box.span-full  { width: 100%; }
.box.span-half  { width: 50%; }
.box.pin-right { float: right ; }
.box.pin-left { float: left ; }
.row.product .box { min-height: 360px; }
.row.product { background: url(i/long-cross.png) 50% 50% ; background-size: cover;  }
.row.nospan   { display:block; }

.row.video   { display:block; }
.row.video video   { width: 75%; float: left; }
.row.video ul { width: 25%; float: right; margin: 0px; padding: 0px 30px; }
.row.video ul strong{ display: block ; }

.box video  { width: 100%; }
.box img.full  { width: 100%; height: 100%; display: block ; }
.box.full-img   { padding: 0 ;  }
.box.full-img img  { width: 100%; height: 100%; display: block ;  }

.box ul   { margin: 20px 10px 20px 30px; }
.box ul.icons   { margin: 10px 0px 0px 0px ; list-style-type: none;  }
.box ul.icons  li  { margin: 0px 10px 10px 0px; float: left; }
.box ul.icons  li img { display: block ; outline: 1px solid rgba(0,0,0,0.5) ;}

.box .buttons  { position: absolute ; bottom: 1px ; left: 1px ; padding: 0; margin: 0 ;}
.box .buttons li  { display: inline-block; padding: 10px; margin: 0 ; outline: 1px solid rgba(0,0,0,1) ; background-color: rgba(0,0,0,1) ; color: rgba(255,255,255,1) ; cursor: pointer ;}
.box .buttons li.on ,
.box .buttons li:hover  { outline: 1px solid rgba(255,255,255,1) ; background-color: rgba(255,255,255,1) ; color: rgba(0,0,0,1) ; }

.find  { padding: 40px 10px 10px; text-align: center ;}
.find input { padding:  0 10px; width: 60%; line-height: 38px; }
.find button { padding: 0 10px; margin: 0 0 0 5px ; position: relative ; top: 2px ; width: 30%; font-size: 1em ; line-height: 42px; background-color: rgba(0,0,0,1); color: rgba(255,255,255,1); border: 0px ; }

.box.tabbed-box { background: #666666 ; padding: 0px; margin: 0px; }
.box .tabs  { list-style-type: none; margin: 0px ; padding: 0px; width: 100% }
.box .tabs  li { width: 20%; float: left; height: 120px; margin: 0px; padding: 10px; border: 1px solid #ffffff ; background: #666666 ; }
.box .tabs  li.on  { background: #ffffff ; color: #000000 ; } 
table  { padding-top: 20px;}
table  td  { vertical-align: top; text-align: left; width: 25%; }

.filter-box { background: rgba(0,0,0,0.15) ; padding: 10px 20px; margin: 0px -10px ; }
.filter-box  select { line-height: 40px; font-size: 18px; width: 50%; }

.visual-element  { }
.visual-element ul  { position: relative ; margin: 0px; padding: 0px; list-style-type: none; }
.visual-element ul li  { position: relative ;  margin: 0px; padding: 0px; list-style-type: none; }
.visual-element ul li   { width: 10%; float: left; -moz-transition: 1s all linear ;  -webkit-transition: 1s all linear ; overflow: hidden ; }
.visual-element ul li.on  { width: 70%; }
.visual-element ul li div  {  }
.visual-element ul li div img { /*width: 100%; */ }

.columns-2  { -moz-column-count: 2; }
.columns-3  { -moz-column-count: 3; }
.columns-4  { -moz-column-count: 4; }
.columns-6  { -moz-column-count: 6; }

#foot   {  background: #696969 ;  padding: 10px; }
#foot nav ul { list-style-type: none ; }






@media only screen and (max-width : 768px) {
	body  { font-size: 95%; }
	.row  { }
	.row.row-0 ,
	.row.row-1 ,
	.row.row-2 ,
	.row.row-3  { display: none ; }
	.box  { width: 66.666% ; }
	.box.span2  { width: 66.666%; }
	.box.full-img  { width: 33.333% ;}
	.box.span2.full-img  { width: 33.333% ;}
}

@media only screen and (max-width : 720px) {
	body  { font-size: 85%; }
}
@media only screen and (min-width : 641px) {
	#cnt { margin-left: 0 !important ;}
}
@media only screen and (max-width : 640px) {
	body  { font-size: 80%; }

	#head > h1  { position: absolute; right: 5px ;}
	#head > h1 span { display: none ; }
	#head > h2  { padding: 0.25em 40px  0.25em 0px  ; font-size: 100%; }


	#head  nav div.level-0.on    { display: inline-block ; }
	#head  nav div.level-0 h2   {  display: inline-block ; line-height: 40px; padding: 0px 10px 2px 40px ; background: url(i/play.png) 00% 50% no-repeat scroll ; cursor: pointer; }
	#head  nav div.level-0.on h2   {  background-image: url(i/play-down.png) ; }
	#head  nav div.level-0 ul   {  position: absolute; display: block ; background: #cccccc; z-index: 12;  max-width: 640px;}
	#head  nav div.level-0.on ul   {  display: block ; }
	#head  nav div.level-0 ul li   {  display: none; ; line-height: 38px; white-space: nowrap; padding: 0px 10px ;  cursor: pointer; }
	#head  nav div.level-0 ul li.home   { display: none;}
	#head  nav div.level-0 ul li.menu   { display: block; position: absolute ; top: -3.5em ; color: #ffffff; }
	#head  nav div.level-0 ul li.menu.on  ,
	#head  nav div.level-0 ul li.menu:hover   { color: #000000; }


	.row  { }
	.row.row-0 ,
	.row.row-1 ,
	.row.row-2 ,
	.row.row-3  { display: none ; }
	.row.row-wrap  { flex-flow: row no-wrap  ;}
	.box  { width: 100% ; }
	.box.span-half  { width: 100% ; }
	.box.span2  { width: 100%; }
	.box.full-img  { display: none ;}
	.box.span2.full-img  { display: none ;}
	.row .row  { display: block; }
	.row .row .box  { width: 100% ; }
	.row .row .box.span2  { width: 100%; }

	.row.close  { top: 10px ;}

}