@font-face {
  font-family: "Neo Sans W01";
  src: url("./fonts/2959d89a-a257-4ce7-9cda-63e00f275369.eot?#iefix");
  src: url("./fonts/2959d89a-a257-4ce7-9cda-63e00f275369.eot?#iefix") format("eot"),
       url("./fonts/a32c3a17-3242-461c-a048-ca8e775582b1.woff") format("woff"),
       url("./fonts/97316a7d-9db1-4dc1-bd87-e24103d88a81.ttf") format("truetype"),
       url("./fonts/1287ca7a-3ce7-40b7-9612-061d4c793f04.svg#1287ca7a-3ce7-40b7-9612-061d4c793f04") format("svg");
}
@font-face {
  font-family: "Neo Sans W01 Bold";
  src: url("./fonts/a0b14394-4dd9-4421-98cf-dfe2f8dc6251.eot?#iefix");
  src: url("./fonts/a0b14394-4dd9-4421-98cf-dfe2f8dc6251.eot?#iefix") format("eot"), url("./fonts/ecedcc38-3aec-48a5-a693-fbfac59dd0ed.woff") format("woff"), url("./fonts/2974017c-634d-4238-9381-e3f0b95a150c.ttf") format("truetype"), url("./fonts/0b4cc213-f9e9-4cb1-aa3c-64e91a1328dc.svg#0b4cc213-f9e9-4cb1-aa3c-64e91a1328dc") format("svg");
}
@font-face {
  font-family: "Axalta Iconfont";
  src: url("./fonts/axalta_iconfont.eot?#iefix");
  src: url("./fonts/axalta_iconfont.eot?#iefix") format("eot"), url("./fonts/axalta_iconfont.woff") format("woff"), url("./fonts/axalta_iconfont.ttf") format("truetype"), url("./fonts/axalta_iconfont.svg#0b4cc213-f9e9-4cb1-aa3c-64e91a1328dc") format("svg");
}





* {
    padding:0;
    margin:0;
}



html, body{
    text-align:center;
    height:99%;
    width:100%;
    padding:0;
    background-color: #fff;
    font-family: Neo Sans W01, arial, helvetica, sans-serif;
    font-size: 1em;

}

body {
    overflow-x: hidden;
}


#subaccordion, #accordion {
    font-family: Neo Sans W01;
    font-size: 1em;
}

h1 {
   margin: 1em;
}

h3 {
     margin: 1.66%;
   font-weight:normal;
   text-align:left;
}
.hgrey { color: #acacac; }
a {
    font-weight: bold;
    color: #000;
}

img {
    border: 0;
}

.error {
    color:#FF0000;
    font-weight: bold;
}

.bggrey {
     background-color:#dedede;

}
.bgwhite {
     background-color:#ffffff;
}
.hgrey { color: #acacac; }

#targetBorder {
    margin : 0 auto;
    border: 0px solid #000000;
    width: 88%;
    background: white;
}

#rotateContent{

    width: 100%;
    height: 90%;
    border: 0;
    overflow: hidden;

}

#colorpicker, #colorbasket, #colorinfo, #help {

    margin:auto;
    width:100%;
    display:none;
    position: absolute;
    z-index:999100000;

    background-image: url('../imgskin/trans80.png');
    border-bottom: 1px solid #ccc;

}





#closeColor, #closeBasket, #closeInfo, #closeHelp {
   cursor: pointer;
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #ababab));
	background:-moz-linear-gradient(top, #ededed 5%, #ababab 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #ababab 100%);
	background:-o-linear-gradient(top, #ededed 5%, #ababab 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #ababab 100%);
	background:linear-gradient(to bottom, #ededed 5%, #ababab 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ababab',GradientType=0);
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #ababab;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:15px;
	font-weight:bold;
	padding:5px 24px;
	text-decoration:none;
	text-shadow:1px 1px 11px #ababab;
    margin-top: 1%;
    margin-bottom: 1%;
    width:200px;
    height:20px;
}



#closeColor:hover, #closeBasket:hover, #closeInfo:hover, #closeHelp:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dbdbdb), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #dbdbdb 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #dbdbdb 5%, #ededed 100%);
	background:-o-linear-gradient(top, #dbdbdb 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #dbdbdb 5%, #ededed 100%);
	background:linear-gradient(to bottom, #dbdbdb 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dbdbdb', endColorstr='#ededed',GradientType=0);
	background-color:#dbdbdb;
}

#closeColor:active, #closeBasket:active, #closeInfo:active, #closeHelp:active {
	position:relative;
	top:1px;
}




.nbutton, .nsbutton {
	-moz-box-shadow:inset 0px 1px 0px 0px #e68770;
	-webkit-box-shadow:inset 0px 1px 0px 0px #e68770;
	box-shadow:inset 0px 1px 0px 0px #e68770;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d40327), color-stop(1, #94021b));
	background:-moz-linear-gradient(top, #d40327 5%, #94021b 100%);
	background:-webkit-linear-gradient(top, #d40327 5%, #94021b 100%);
	background:-o-linear-gradient(top, #d40327 5%, #94021b 100%);
	background:-ms-linear-gradient(top, #d40327 5%, #94021b 100%);
	background:linear-gradient(to bottom, #d40327 5%, #94021b 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d40327', endColorstr='#94021b',GradientType=0);
	background-color:#d40327;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #94021b;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:15px;
	font-weight:bold;
	padding:5px 24px;
	text-decoration:none;
	text-shadow:1px 1px 11px #94021b;
}

.nsbutton {
	font-size:1em;
	padding:2px 15px;
}

.nbutton:hover, .nsbutton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #94021b), color-stop(1, #d40327));
	background:-moz-linear-gradient(top, #94021b 5%, #d40327 100%);
	background:-webkit-linear-gradient(top, #94021b 5%, #d40327 100%);
	background:-o-linear-gradient(top, #94021b 5%, #d40327 100%);
	background:-ms-linear-gradient(top, #94021b 5%, #d40327 100%);
	background:linear-gradient(to bottom, #94021b 5%, #d40327 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#94021b', endColorstr='#d40327',GradientType=0);
	background-color:#94021b;
}
.nbutton:active, , .nsbutton:active {
	position:relative;
	top:1px;
}



#colorlistwrap {
   width: 80%;
   margin: auto;
}

.colorlist, .clsearch {
   width: 30%;
   margin: 1.66%;
   float:left;
   border:0px solid #fff;
   text-align:left;
}

#colorlist {
   width: 80%;
   height: 250px;
   margin: auto;
   margin-top:15px;
   border:1px solid #fff;
   overflow:auto;
   padding: 1%;
   background-image: url('../imgskin/trans50.png');

}

.cppic {
   width:40px;
   height: 40px;
   margin:0.5% 0.5% 0 0;
   float:left;
   text-align: left;
   text-decoration: none;
}

.cppic:hover, .cppic:active  {
   border:1px solid red;
}
.cppic:link, .cppic:visited  {
   border:1px solid #ccc;
}


#tooltip
{
    text-align: center;
    color: #fff;
    background: #111;
    position: absolute;
    z-index: 99990000000;
    padding: 15px;
}




    #tooltip:after /* triangle decoration */
    {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #111;
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
    }

        #tooltip.top:after
        {
            border-top-color: transparent;
            border-bottom: 10px solid #111;
            top: -20px;
            bottom: auto;
        }

        #tooltip.left:after
        {
            left: 10px;
            margin: 0;
        }

        #tooltip.right:after
        {
            right: 10px;
            left: auto;
            margin: 0;
        }
        
        


.clear {
	clear:both;
	overflow:hidden;
	height:0;
	display:block;
}
html>body .clear {
	overflow:visible;
}
#dummy { display: none; height: 200px; overflow: auto; }

#topmenu {
       background-image: url('../imgskin/back_header.png');
       background-repeat:repeat-x;
       height: 106px;
}


.cmpselect {
    float:left;
    width:7%;
    margin-left:1.5%;
    border:1px solid #ccc;
}



#flymenu {
    display:none;
    position: absolute;
    z-index:9100000;
    width:100%;

}

.alert-message-wrapper {
    position: fixed;
    width:100%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 111111112;
}

.alert-message {
    width: 75%;
    background: #fff;
    padding: 40px;
    border: 1px solid #ccc;
    margin: 0 auto;
    margin-bottom: 10px;
}

.alert-message-button {
    color: #000;
    background: none;
    vertical-align: middle;
    border: 1px solid #000;
    padding: 9px 10px;
    border-radius: 14px;
    line-height: 10px;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    width: 95px;
    margin: 0 auto;
}

.alert-message-text {
    margin-bottom:10px;
}

.alert-message-text  strong {
    color: red;
}

#logo, .logo {
    float:left;
    margin: 1% 10% 0 2%;
    background-image: url('../imgskin/ci_logo150.png');
    height:80px;
    width:80px;
    background-size: contain;
    background-repeat: no-repeat;
}

.logo {
    background-image: none;;
}

#distributorlogo {
    float:right;
    margin: 1% 1% 0 0;
       width:280px;
       height:85px;
}



.flymenu {
    float:left;
    width:20em;
    background-image: url('../imgskin/trans80.png');
    border: 1px solid #bbb;
    border-top: 0px solid #bbb;
    text-align:left;
    padding:0.5%;

}

#flyul, #flyul li {
    list-style-type: none;
}

#flyul li {
    display:block;
    padding:2%;
    background: #ccc;
    margin:2px;
}

#flyul li a {
    text-decoration: none;
}

#flyul li a:hover {
    color: #cc003a;
}


#triggerColor, #triggerInfo, #triggerBasket, #fullscreen, #pdf, #triggerComp, #triggerObj , #triggerHelp, #triggerHelpVideo, #triggerMenu, #menuend {
   width:80px;
   height:106px;
   float:left;
   cursor: pointer;
}

#menuend {
   width:3px;
}

.leer {
   width:80px;
   height:106px;
}
#triggerObj {
       background-image: url('../imgskin/butt_object.png');
}
#triggerMenu {
       background-image: url('../imgskin/butt_flymenu.png');
}

#triggerComp {
       background-image: url('../imgskin/butt_comp.png');
}
#triggerColor {
       background-image: url('../imgskin/butt_picker.png');
}
#triggerInfo {
       background-image: url('../imgskin/butt_info.png');
}
#triggerBasket {
       background-image: url('../imgskin/butt_basket.png');
}
#fullscreen {
       background-image: url('../imgskin/butt_fullscreen.png');
}
#pdf {
       background-image: url('../imgskin/butt_pdf.png');
}

#triggerHelp {
       background-image: url('../imgskin/butt_help.png');
}
#triggerHelpVideo {
       background-image: url('../imgskin/butt_helpvideo.png');
}

#menuend {
       background-image: url('../imgskin/butt_end.png');
}

#triggerColor:hover, #triggerInfo:hover, #triggerHelpVideo:hover,  #triggerBasket:hover, #fullscreen:hover, #pdf:hover , #triggerObj:hover,  #triggerComp:hover, #triggerHelp:hover, #triggerMenu:hover {
       background-position: 0 -106px;
}


#triggerMobMenu:hover {
       background-position: 0 -50px;
}

#orderconfirm {
    margin-top:10px;
    font-weight: bold;
    color:green;
}

.headline {

color: #cc003a;
font-weight: bold;

}


UL.surfaces {
    list-style-type: none;
}

UL.surfaces LI {
    list-style-type: none;
    margin: 0.5em;
    float:left;
    
}





.selectable  {
    color: #555;
}

a.selectable:hover  {
    color: #cc003a;
}

.selected {
    color: #cc003a;
    border: 1px solid #cc003a;
    padding:2px;
    text-decoration: none;
}


.colorinfoimg {
width: 10%;
height:20px;
}

input[type="text"], select,  textarea  {
    padding:2px;
    border:1px solid #cc003a;

}

.invisible {
    border:0px solid #cc003a;
}

.sbutton {
    cursor: pointer;
    border:1px solid #555;
    background-color: #999;
    color: #fff;
    font-weight: bold;

}



select {
    width: 20.2em;
    padding:2px;
    margin: 0.5% 0 0.5% 0;
}

label {
    width: 7em;
    text-align: right;
    display: inline-block;
    margin-right:1em;
}
.myorderform {
    text-align:center;
}
.tabcenter {
    margin: auto;
}

.tabcenter td {
    padding:5px;
    margin: 2px;
    background-color: #efefef;
}

#mycolorinfo p {
   margin: 1% 0 1% 0;
}

.productbold {
    font-weight: bold;
    color: #555;

}


.lang {
 float:right;
 margin:2% 1% 0 0;
 z-index:10000000000;
}

.trch:hover td {background:#ccc; }

#help img {
    margin: 0 0.5em;
}



#mobmenu {
    display: none;
    z-index:9100000;     
}

.footerax {

    position:absolute; 
    /*bottom:2%;*/
    left:0;  
    z-index:900000;
    width:216px;
    height:30px;
}

.footeral2 {
    position:absolute; 
    /*bottom:2%;*/
    right:0;  
    z-index:900000;
    width:310px;
    height:60px;
}


#termstxt {
   width:80%;
   padding:2%;
   border: 0px solid red;
   text-align:left;
}
#termstxt h2, p, ul {
    margin-top: 1em;
}

#termstxt UL {
    margin-left: 1em;
}

.small {
    font-size:0.75em;
}


.small, .small a {
    color: #aaa;
}

.small a:hover {
    color: #000;
}

.col-1 {
    width: 99%;
    margin:auto;
}

.col-2 {
    width:45%;
    margin:2%;
    float: left;
}

.col-2 img {
    margin: 0 5px 5px 0;
}


@media screen and (max-width: 1100px) {

    #logo {
       margin: 1% 3%;
    }
    
    
    #distributorlogo, #distributorlogomob {

       width:180px;
       height:55px;


       margin: 2% 1% 0 0;
       border: 0px solid #fff;
    }
}

/*
@media screen and (max-width: 900px) {

}

*/


@media screen and (max-width: 899px) {
    
    #distributorlogo, #distributorlogomob {
       width:120px;
       height:37px;
       margin: 1% 1% 0 0;
       border: 0px solid #fff;
    }

    .hgrey {
         font-size:1em;
         font-weight:bold;
    }
    
    #topmenu {
       background-image: url('../imgskin/back_header.png');
       background-repeat: repeat-x;
       height: 50px;
    }
    
    #logo {
       width:40px;
       height:40px;
       margin: 1%;
    }
    

    
    #triggerMobMenu {
        width:80px;
        height:50px;
        background-image: url('../imgskin/butt_mobmenu.png');
        float:right;
        cursor:pointer;
    }
    
    .cmpselect {
        width:15%;
    }
    
    
    
    #pcmenu {
         display: none;
    }

    #mobmenu {
         display: block;
   }

    #flymenu, .flymenu {
        display:none;
    }

    #inMobmenu {
         background-image: url('../imgskin/trans50.png');
         position: absolute;
         top:51px;
         z-index:9110000;
         display:none;
         text-align: left;
         width: 99%;
    }
    
    .mobmenu  {
         background: #aaa;
         color:#fff;
         border-bottom: 1px solid #fff;
         padding: 5% 2% 1% 2%;
         height:2em;
    }

    .mobmenu a {
         color:#fff;
         text-decoration:  none; 
    }


    #triggerColor2, #triggerInfo2, #triggerBasket2, #pdf2, #triggerComp2, #triggerObj2, #triggerHelp2 {
       cursor: pointer;
       background-image: none;
       float: none;
       /*text-decoration: underline;*/
       text-align: left;
       font-weight: bold;
       font-size: 1em;   
       /*width:100%;*/
       height:2em;
       
    }
    
    .leer {
       width:100%;
       height:1em;
    }
    
    .colorlist {
       float:none;
       width:100%;
       margin-bottom:20px; 
       /*height:3em;
       overflow: auto;*/
    }
     .clsearch {
        width: 100%;
        float:none;
       font-size:0.8em;
   }

   .searchfield {
       width:40%;
       margin-right:5%;
   }
   
   .searchbutton {
       width:40%;
       cursor:pointer;
   }

    
    .ordertable td, .tabcenter td {
        font-size: 0.8em;
    }
    
    .footerax {
        width:108px;
        height:15px;
    }
    
    .footeral {
        width:75px;
        height:30px;
    }

    .footeral2 {
        width:160px;
        height:30px;
    }
    
    label {
        text-align: left;
        display: inline-block;
        font-weight: bold;
        margin-top:5px;
        margin-left:5px;
    }
    
    .myorderform {
        text-align:left;
    }

    input[type="text"], .sbutton, textarea {
        width: 95%;
        margin: 0 0 0 5px;
    }
    
    .col-2 {
        width:99%;
        margin:auto;
        margin-bottom:10px;
        float: none;
    }
    
    #rotateContent {
        width: 100%;
        height:100%;
    }

}




@media screen and (min-width: 900px) {



    #pcmenu {
         display: block;
    }

    #mobmenu {
         display: none;
    }

    .colorlist, .clsearch {
       float:left;
       width:30%;
       margin-bottom:0;       
    }    


    .ordertable td, .tabcenter td {
        font-size: 1em;
    }
    .footerax {
        width:216px;
        height:30px;
    }
    
    .footeral {
        width:150px;
        height:60px;
    }
    
    .footeral2 {
        width:310px;
        height:60px;
    }
    
    label {
        width: 7em;
        text-align: right;
        display: inline-block;
        margin-right:1em;
        margin-top:5px;
        font-weight: normal;        
    }  
    .myorderform {
        text-align:center;
    }
    
    input[type="text"], .sbutton, textarea  {
        width: 20em;
        margin: 0.5% 0 0.5% 0;
    }
        
    .col-2 {
        width:45%;
        margin:2%;
        float: left;
    }

}


@media screen and (max-width: 600px) {

    .footer, #disclaim {
        display: none;
    }

}