body { margin: 0; background-color: #0f0d0f; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}
.container { width: 80%; margin: 0 auto;}
.container:first-child { margin: 70px auto 50px auto;}
.container h1 { color: white; float: left;}
.container .img { background-image: url('../img/info-icon.png'); background-repeat: no-repeat; background-size: contain; width: 28px; height: 28px; display: inline-block; margin: 24px 0 0 2%; cursor: pointer;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.container .img:hover { background-image: url(../img/info-icon-hover.png);}
.container .grid { width: 33.333%; float: left;}
.container .grid:nth-child(3n) { margin-right: 0;}
.square { width: 45px; height: 60px; border-radius: 5px; behavior: url(css/pie.htc); color: black; float: left; margin: 0 0 5px 5px; cursor: pointer; position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.square:hover { background-color: rgba(173,173,178,0.2); color: #ccc;}
.number { font-size: 12px; padding: 4px 0 0 4px; font-weight: bold; float: left; width: 30px; outline: 0;}
.point_container { width: 10px; position: absolute; bottom: 0; margin: 0 0 12% 5px;}
.point { background-color: black; width: 4px; height: 4px;}
.double_point { background-color: black; width: 4px; height: 4px; float: left; margin: 1px 1px 0 0;}
.double_point_2 { background-color: black; width: 4px; height: 4px; float: left; margin-top: 1px;}
.white { background-color: white;}
.targetColor .fix .box_fix .subtitle { margin-top: 3%;}
.targetColor .fix .box_fix .subtitle .label1 .info_point { background-color: black; width: 4px; height: 4px; margin: 7px 18px 0 0; float:left;}
.targetColor .fix .box_fix .subtitle .label2 .info_double_point { background-color: black; width: 4px; height: 4px; margin: 7px 1px 0 0; float: left;}
.targetColor .fix .box_fix .subtitle .label2 .info_double_point2 { background-color: black; width: 4px; height: 4px; margin: 7px 12px 0 0; float: left;}


.a { background-color: #E7E9E7;}
.b { background-color: #ECEAD0;}
.c { background-color: #F7D000;}
.d { background-color: #F3C12C;}
.e { background-color: #F6D155;}
.f { background-color: #ECA825;}
.g { background-color: #F7BF68;}
.h { background-color: #E2A829;}
.i { background-color: #F2AB46;}
.j { background-color: #EFAD55;}
.k { background-color: #CEC153;}
.l { background-color: #BCA949;}
.m { background-color: #B9A023;}
.n { background-color: #DACD65;}
.o { background-color: #EFDC75;}
.p { background-color: #EEEA97;}
.q { background-color: #E7DF99;}
.r { background-color: #D4CC9A;}
.s { background-color: #CAC4A4;}
.t { background-color: #928E64;}
.u { background-color: #A98B2D; color: white;}
.v { background-color: #8A6F48; color: white;}
.x { background-color: #5B4F3B; color: white;}
.z { background-color: #9A8B4F; color: white;}
.aa { background-color: #AF9841; color: white;}
.ab { background-color: #FEE715;}
.ac { background-color: #F0E87D;}
.ad { background-color: #EDDD59;}
.ae { background-color: #D9CE52;}
.af { background-color: #B5CC39;}
.ag { background-color: #DE8E65;}
.ah { background-color: #E47127; color: white;}
.ai { background-color: #C86733; color: white;}
.aj { background-color: #D86D39; color: white;}
.ak { background-color: #DC793E; color: white;}
.al { background-color: #DC793A; color: white;}
.am { background-color: #D75C5D; color: white;}
.an { background-color: #E2583E; color: white;}
.ao { background-color: #D56231; color: white;}
.ap { background-color: #973A36; color: white;}
.aq { background-color: #B5BF50;}
.ar { background-color: #7B7F32;}
.as { background-color: #756D47; color: white;}
.at { background-color: #6E7153; color: white;}
.au { background-color: #769358;}
.av { background-color: #7AAB55;}
.ax { background-color: #9FC131;}
.az { background-color: #AFCB80;}
.ba { background-color: #C9D77E;}
.bb { background-color: #BED38E;}
.bc { background-color: #DEC05F;}
.bd { background-color: #CAB698;}
.be { background-color: #97754C;}
.bf { background-color: #91672F; color: white;}
.bg { background-color: #61473B; color: white;}
.bh { background-color: #91552B; color: white;}
.bi { background-color: #E5B39B;}
.bj { background-color: #D27D56;}
.bk { background-color: #E6AF91;}
.bl { background-color: #CDB2A5;}
.bm { background-color: #9B1B30; color: white;}
.bn { background-color: #813639; color: white;}
.bo { background-color: #9A382D; color: white;}
.bp { background-color: #8C373E; color: white;}
.bq { background-color: #612E35; color: white;}
.br { background-color: #804F5A; color: white;}
.bs { background-color: #64313E; color: white;}
.bt { background-color: #9F4440; color: white;}
.bu { background-color: #8B4963; color: white;}
.bv { background-color: #D979A2; color: white;}
.bx { background-color: #857946; color: white;}
.bz { background-color: #676232; color: white;}
.ca { background-color: #656344; color: white;}
.cb { background-color: #545A3E; color: white;}
.cc { background-color: #647755; color: white;}
.cd { background-color: #7D956D; color: white;}
.ce { background-color: #A7C796;}
.cf { background-color: #C3D3A8;}
.cg { background-color: #CFDBD1;}
.ch { background-color: #9BC2B1;}
.ci { background-color: #B7B17A;}
.cj { background-color: #CFC486;}
.ck { background-color: #D2CBAF;}
.cl { background-color: #F4E1AD;}
.cm { background-color: #F1DAA4;}
.cn { background-color: #FFC007;}
.co { background-color: #E4C389;}
.cp { background-color: #E3CB91;}
.cq { background-color: #E8D5A8;}
.cr { background-color: #F1DE9C;}
.cs { background-color: #CB2F70; color: white;}
.ct { background-color: #E38FB7;}
.cu { background-color: #E99ABE;}
.cv { background-color: #E8B7C1;}
.cx { background-color: #ED9FAE;}
.cz { background-color: #B38FB1;}
.da { background-color: #B284BE; color: white;}
.db { background-color: #824B77; color: white;}
.dc { background-color: #8B559B; color: white;}
.dd { background-color: #8F69A5; color: white;}
.de { background-color: #00874F; color: white;}
.df { background-color: #236952; color: white;}
.dg { background-color: #51814F;}
.dh { background-color: #00A35B;}
.di { background-color: #009246;}
.dj { background-color: #55AA59;}
.dk { background-color: #7EB58C;}
.dl { background-color: #AEDB9F;}
.dm { background-color: #97C3A2;}
.dn { background-color: #9EC88D;}
.do { background-color: #C29E85;}
.dp { background-color: #A9806A;}
.dq { background-color: #8D6F60; color: white;}
.dr { background-color: #6A443E; color: white;}
.ds { background-color: #523F3B; color: white;}
.dt { background-color: #664D3B; color: white;}
.du { background-color: #55433C; color: white;}
.dv { background-color: #724C44; color: white;}
.dx { background-color: #593738; color: white;}
.dz { background-color: #65443C; color: white;}
.ea { background-color: #D6BAB2;}
.eb { background-color: #D7A2A4;}
.ec { background-color: #83677F; color: white;}
.ed { background-color: #755C78; color: white;}
.ee { background-color: #B88BB3;}
.ef { background-color: #693B71; color: white;}
.eg { background-color: #5A435A; color: white;}
.eh { background-color: #80585D; color: white;}
.ei { background-color: #483A49; color: white;}
.ej { background-color: #4E423D; color: white;}
.ek { background-color: #7DBBA4;}
.el { background-color: #007163; color: white;}
.em { background-color: #497D76; color: white;}
.en { background-color: #42655B; color: white;}
.eo { background-color: #40524E; color: white;}
.ep { background-color: #516A5D; color: white;}
.eq { background-color: #768984;}
.er { background-color: #A1B5A7;}
.es { background-color: #A7C2AC;}
.et { background-color: #BBCAC9;}
.eu { background-color: #DBB68F;}
.ev { background-color: #DAB77E;}
.ex { background-color: #CC9350;}
.ez { background-color: #A87226; color: white;}
.fa { background-color: #935635; color: white;}
.fb { background-color: #AD6659; color: white;}
.fc { background-color: #574333; color: white;}
.fd { background-color: #675B4E; color: white;}
.fe { background-color: #5C5244; color: white;}
.ff { background-color: #766A5C; color: white;}
.fg { background-color: #6D6695; color: white;}
.fh { background-color: #C28799;}
.fi { background-color: #E29A86;}
.fj { background-color: #A5B8D0;}
.fk { background-color: #BAB8D3;}
.fl { background-color: #D0D0DA;}
.fm { background-color: #8F7DA5; color: white;}
.fn { background-color: #603F83; color: white;}
.fo { background-color: #6D5698; color: white;}
.fp { background-color: #4C3957; color: white;}
.fq { background-color: #007D69; color: white;}
.fr { background-color: #0F9D76; color: white;}
.fs { background-color: #2EA785; color: white;}
.ft { background-color: #40A48E; color: white;}
.fu { background-color: #8FC9B8;}
.fv { background-color: #AACCB9;}
.fx { background-color: #C0DCCD;}
.fz { background-color: #7FBB9E;}
.ga { background-color: #B4D3B2;}
.gb { background-color: #339C5E;}
.gc { background-color: #A89C94;}
.gd { background-color: #B3ADA7;}
.ge { background-color: #D7D7C7;}
.gf { background-color: #C9D3DC;}
.gg { background-color: #A2B6B9;}
.gh { background-color: #98A0A5;}
.gi { background-color: #3E4F5C; color: white;}
.gj { background-color: #46515A; color: white;}
.gk { background-color: #3C3F4A; color: white;}
.gl { background-color: #4A4B4D; color: white;}
.gm { background-color: #5C619D; color: white;}
.gn { background-color: #696BA0;}
.go { background-color: #9499BB;}
.gp { background-color: #9A9BC1;}
.gq { background-color: #8C8EB2;}
.gr { background-color: #4E334E; color: white;}
.gs { background-color: #544275; color: white;}
.gt { background-color: #3D428B; color: white;}
.gu { background-color: #4D448A; color: white;}
.gv { background-color: #7D74A8; color: white;}
.gx { background-color: #005B5D; color: white;}
.gz { background-color: #009499; color: white;}
.ha { background-color: #53B0AE;}
.hb { background-color: #BCD3D5;}
.hc { background-color: #9FD9D7;}
.hd { background-color: #81C3B4;}
.he { background-color: #149C88;}
.hf { background-color: #008778;}
.hg { background-color: #11574A; color: white;}
.hh { background-color: #395551; color: white;}
.hi { background-color: #C5C5C5;}
.hj { background-color: #BEBDBD;}
.hk { background-color: #9F9C99;}
.hl { background-color: #848283;}
.hm { background-color: #A09F9C;}
.hn { background-color: #837F7F; color: white;}
.ho { background-color: #6C6868; color: white;}
.hp { background-color: #606263; color: white;}
.hq { background-color: #5D5A59; color: white;}
.hr { background-color: #353030; color: white;}
.hs { background-color: #759ACD;}
.ht { background-color: #3267AD; color: white;}
.hu { background-color: #3173B1; color: white;}
.hv { background-color: #2E5493; color: white;}
.hx { background-color: #1D4E89; color: white;}
.hz { background-color: #164D8F; color: white;}
.ia { background-color: #2F3E86; color: white;}
.ib { background-color: #3B4B87; color: white;}
.ic { background-color: #3D3E63; color: white;}
.id { background-color: #3D407F; color: white;}
.ie { background-color: #82ABAB;}
.if { background-color: #6B9191;}
.ig { background-color: #63888E; color: white;}
.ih { background-color: #3E6873; color: white;}
.ii { background-color: #2E3235; color: white;}
.ij { background-color: #2F3435; color: white;}
.ik { background-color: #515A4E; color: white;}
.il { background-color: #5C6D61; color: white;}
.im { background-color: #8A9892;}
.in { background-color: #A2B0A8;}
.io { background-color: #D1C4C3;}
.ip { background-color: #9FBBC6;}
.iq { background-color: #A6C0CD;}
.ir { background-color: #9CBCD7;}
.is { background-color: #667B98;}
.it { background-color: #384F6B; color: white;}
.iu { background-color: #395E7A; color: white;}
.iv { background-color: #373E4B; color: white;}
.ix { background-color: #263145; color: white;}
.iz { background-color: #2D2C4D; color: white;}
.ja { background-color: #92B5D9;}
.jb { background-color: #8CBED6;}
.jc { background-color: #52A3D6;}
.jd { background-color: #0092CA;}
.je { background-color: #007BBD;}
.jf { background-color: #006A8C; color: white;}
.jg { background-color: #2A6790; color: white;}
.jh { background-color: #364450; color: white;}
.ji { background-color: #1A7BA8; color: white;}
.jj { background-color: #007CAF; color: white;}
.jk { background-color: #0078BE; color: white;}
.jl { background-color: #0095C6;}
.jm { background-color: #00A6CB;}
.jn { background-color: #58AFC9;}
.jo { background-color: #85C6D7;}
.jp { background-color: #42BDCB;}
.jq { background-color: #00A4B4; color: white;}
.jr { background-color: #00AFAC;}
.js { background-color: #006465; color: white;}
.jt { background-color: #265C59; color: white;}
.ju { background-color: #ffa953;}
.jv { background-color: #ff7074; color: white;}
.jx { background-color: #f241af; color: white;}
.jz { background-color: #80d343;}
.ka { background-color: #e4e642;}




.targetColor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(52, 54, 66, 0.9);
  z-index: 3;
  cursor: pointer;
  visibility: hidden;
  overflow-y: auto;
  opacity: 0;
  -webkit-transition: opacity 0.3s 0, visibility 0 0.3s;
  -moz-transition: opacity 0.3s 0, visibility 0 0.3s;
  transition: opacity 0.3s 0, visibility 0 0.3s;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.targetColor.is-visible {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.3s 0, visibility 0 0;
  -moz-transition: opacity 0.3s 0, visibility 0 0;
  transition: opacity 0.3s 0, visibility 0 0;
}
.targetColor.is-visible .targetDiv {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.targetDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  background: #FFF;
  margin: -125px 0 50px -350px;
  cursor: pointer;
  border-radius: 0.25em;
  -webkit-transform: translateY(-30px);
  -moz-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  -o-transform: translateY(-30px);
  transform: translateY(-30px);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.fix { margin-top: -310px;}
.box { width: 100%;}
.box_fix { width: 82%; height: auto; margin-left: 4%; padding: 1px 0; font-size: 14px; text-align: justify; text-justify: inter-word; line-height: 1.3;}
.box_color { width: 30%; height: 250px; float: left; border-radius: 0.25em 0 0 0.25em;}
.box_info { width: 66%; padding-left: 4%; float: left;}
.box h2 { font-size: 20px; padding: 30px 10px 0 5px; -webkit-margin-before: 0em; margin: 0 0 1em 0;}
.box span { font-size: 14px; padding: 14px 0 0 5px; display: block;}
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

@media screen and (min-width: 1370px) and (max-width: 1910px) {
.container { width: 90%;}
.square { width: 36px; height: 50px; border-radius: 4px; margin: 0 0 4px 4px;}
.number { font-size: 11px; padding: 4px 0 0 4px;}
.point { width: 3px; height: 3px;}
.double_point { width: 3px; height:3px;}
.double_point_2 { width: 3px; height: 3px;}

.box { width: 90%;}
}

@media screen and (min-width: 820px) and (max-width: 1370px) {
.container:first-child { margin: 40px auto 10px auto;}
.container h1 { font-size: 20pt;}
.container .img { width: 24px; height: 24px; margin: 20px 0 0 2%;}
.container .grid { width: 100%; float: none;}
.square { width: 40px; height: 55px; border-radius: 4px;}
    
.box h2 { font-size: 18px;}
}

@media screen and (min-width: 450px) and (max-width: 820px) {
.container:first-child { margin: 40px auto 10px auto;}
.container h1 { font-size: 20pt;}
.container .img { width: 24px; height: 24px; margin: 20px 0 0 4%;}
.container .grid { width: 100%; float: none;}
.square { width: 40px; height: 55px; border-radius: 4px;}

    
.fix { position: relative; margin-top: 30px; top: 0;}
.targetDiv { width: 80%; margin-left: -40%;}
.box_fix { width: 90%; font-size: 13px;}
.box h2 { font-size: 2.6vw; padding-top: 32px;}
.box span { font-size: 13px;}
}

@media screen and (min-width: 320px) and (max-width: 450px) {
.container:first-child { margin: 30px auto 10px auto;}
.container h1 { font-size: 14pt; padding-left: 7%;}
.container .img { width: 17px; height: 17px; margin: 14px 0 0 4%;}
.container .grid { width: 90%; float: none; padding-left: 5%;}
.square { width: 28px; height: 45px; border-radius: 4px; margin: 0 0 4px 3px;}
.number { font-size: 9px; padding: 3px 0 0 2px;}
.point_container { margin-left: 3px;}
.point { width: 3px; height: 3px;}
.double_point { width: 3px; height:3px;}
.double_point_2 { width: 3px; height: 3px;}
.targetColor .fix .box_fix .subtitle .label1 .info_point { width: 3px; height: 3px; margin: 5px 15px 0 0;}
.targetColor .fix .box_fix .subtitle .label2 .info_double_point { width: 3px; height: 3px; margin: 6px 1px 0 0;}
.targetColor .fix .box_fix .subtitle .label2 .info_double_point2 { width: 3px; height: 3px; margin: 6px 11px 0 0;}

.fix { position: relative; margin-top: 30px; top: 0;}
.targetDiv { width: 90%; margin-left: -45%;}
.box_fix { width: 90%; font-size: 11px;}
.box_color { height: 200px;}
.box_info { padding-left: 1%;}
.box h2 { font-size: 3vw; padding: 31px 0 0 5px; margin: 0 0 0.5em 0;}
.box span { font-size: 11px; padding: 12px 0 0 5px;}
}

@media (max-width: 320px) {
.container:first-child { margin: 30px auto 10px auto;}
.container h1 { font-size: 11pt; padding-left: 7%;}
.container .img { width: 13px; height: 13px; margin: 11px 0 0 4%;}
.container .grid { width: 90%; float: none; padding-left: 5%;}
.square { width: 28px; height: 45px; border-radius: 4px; margin: 0 0 4px 3px;}
.number { font-size: 9px; padding: 3px 0 0 2px;}
.point_container { margin-left: 3px;}
.point { width: 3px; height: 3px;}
.double_point { width: 3px; height:3px;}
.double_point_2 { width: 3px; height: 3px;}
.targetColor .fix .box_fix .subtitle .label1 .info_point { width: 3px; height: 3px; margin: 5px 15px 0 0;}
.targetColor .fix .box_fix .subtitle .label2 .info_double_point { width: 3px; height: 3px; margin: 6px 1px 0 0;}
.targetColor .fix .box_fix .subtitle .label2 .info_double_point2 { width: 3px; height: 3px; margin: 6px 10px 0 0;}

.fix { position: relative; margin-top: 30px; top: 0;}
.targetDiv { width: 90%; margin-left: -45%;}
.box_fix { width: 90%; font-size: 11px;}
.box_color { height: 100px; width: 100%; border-radius: 0.25em 0.25em 0 0;}
.box_info { padding-left: 1%; width: 94%;}
.box h2 { font-size: 4.3vw; padding: 15px 0 0 5px; margin: 0 0 0.5em 0;}
.box span { font-size: 11px; padding: 12px 0 0 5px; width: 100%; }
.box span:last-child { padding-bottom: 10px;}
}