body {
    font-family: 'helvetica', sans-serif;
    font-size: 100%;
    background-color: #e5e5e5;
    
    
}

strong{
    font-weight: 900 !important;
}

.how {
    padding: 35px;
    background: #d6d6d6;
    margin-top: 25px;
    margin-bottom: 25px;
}

.how h4 {
    color: #f4f4f4;
    font-size: 1.5em;
    padding-bottom: 10px;

}

.buttons {
    color: #fff;
    font-size: 11px;
    text-indent: 4px;
    font-weight: 100;
    line-height: 20px;    
}

.left{
    
    float: left;
    width: 405px;
    margin-right: 55px;
    margin-bottom: 65px;
    
}
.right{
    overflow: auto;
    width: 540px;
    display: inline-block;
    
}

header .container, main .container, footer .container {
    margin: 75px;
    line-height: 1.25;
	
}

header {
    background: white;
    overflow: auto;
    padding-bottom: 5px;
}

footer {
    clear: both;
}

h1 {
    font-weight: 500;
    color: #464646;
    font-size: 5em;   
    
}

h2 {
    font-weight: 500;
    color: #464646;
    font-size: 4em;
    
}

#mainH2 {
    font-weight: 500;
    color: #bcbcbc;
    font-size: 2.5em;
}
h3#chromatic {
    padding-top: 55px;   
}

h3 {
    font-weight: 50;
    color: #464646;
    font-size: 2.5em;
    
}

h4 {
    font-weight: 50;
    color: #464646;
    font-size: 2.5em;  
}

h5 {
    font-weight: 1em;
    color: #777777;
    font-size: 1.25em;
    font-weight: 100;
}

.intro h5 {
    font-weight: 900;
    font-size: 1em;
    
}

.intro {
    padding-bottom: 55px;
    line-height: 1.5;
    overflow: auto;
    max-width: 1000px;
}


p {
    font-weight: 100;
    color: #6c6c6c;
    font-size: 16px;
}

li p {
    font-weight: 500;
    color: #464646;
    padding: 2.5px;
    padding-left: 25px;  
    
}

hr {
  background: #d8d8d8; 
  clear: both; 
  float: none; 
  width: 100%; 
  height: 1px;  
  border: none;
    margin-top: 25px;
    margin-bottom: 25px;
}

.right hr {
    margin-top: 25px;
    margin-bottom: 8px;
}

header {
    background: white;
}


.orchestra {
    background: red;
}

#div1a {
	width: 100px;
	height: 100px;
	background-color: #850708;
    display: inline-block;
    margin-left: -4px;
    margin-bottom: 15px;
	}

#div1a:hover {
	background-color: #dddbdb;
	}



#div1b {
	width: 100px;
	height: 100px;
	background-color: #b11516;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div1b:hover {
	background-color: #dddbdb;
	}


#div1c {
	width: 100px;
	height: 100px;
	background-color: #e14747;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div1c:hover {
	background-color: #dddbdb;
	}


#div1d {
	width: 100px;
	height: 100px;
	background-color: #ec7c7b;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div1d:hover {
	background-color: #dddbdb;
	}



#div2a {
	width: 100px;
	height: 100px;
	background-color: #a46112;
    display: inline-block;
   margin-left: 0px;
    margin-bottom: 15px;
	}

#div2a:hover {
	background-color: #dddbdb;
	}

#div2b {
	width: 100px;
	height: 100px;
	background-color: #d98522;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div2b:hover {
	background-color: #dddbdb;
	}


#div2c {
	width: 100px;
	height: 100px;
	background-color: #e89d1d;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div2c:hover {
	background-color: #dddbdb;
	}


#div2d {
	width: 100px;
	height: 100px;
	background-color: #f4bc5b;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div2d:hover {
	background-color: #dddbdb;
	}

#div3a {
	width: 100px;
	height: 100px;
	background-color: #cfc204;
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 15px;
	}

#div3a:hover {
	background-color: #dddbdb;
	}

#div3b {
	width: 100px;
	height: 100px;
	background-color: #e8da08;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div3b:hover {
	background-color: #dddbdb;
	}


#div3c {
	width: 100px;
	height: 100px;
	background-color: #f5e81e;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div3c:hover {
	background-color: #dddbdb;
	}


#div3d {
	width: 100px;
	height: 100px;
	background-color: #f8f05f;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div3d:hover {
	background-color: #dddbdb;
	}

#div4a {
	width: 100px;
	height: 100px;
	background-color: #007236;
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 15px;
	}

#div4a:hover {
	background-color: #dddbdb;
	}

#div4b {
	width: 100px;
	height: 100px;
	background-color: #2b9728;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div4b:hover {
	background-color: #dddbdb;
	}


#div4c {
	width: 100px;
	height: 100px;
	background-color: #5dbb5b;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div4c:hover {
	background-color: #dddbdb;
	}


#div4d {
	width: 100px;
	height: 100px;
	background-color: #90d88e;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div4d:hover {
	background-color: #dddbdb;
	}

#div5a {
	width: 100px;
	height: 100px;
	background-color: #007c97;
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 15px;
	}

#div5a:hover {
	background-color: #dddbdb;
	}

#div5b {
	width: 100px;
	height: 100px;
	background-color: #2ca2c6;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div5b:hover {
	background-color: #dddbdb;
	}


#div5c {
	width: 100px;
	height: 100px;
	background-color: #2cccd6;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div5c:hover {
	background-color: #dddbdb;
	}


#div5d {
	width: 100px;
	height: 100px;
	background-color: #6feff0;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div5d:hover {
	background-color: #dddbdb;
	}


#div6a {
	width: 100px;
	height: 100px;
	background-color: #03519b;
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 15px;
	}

#div6a:hover {
	background-color: #dddbdb;
	}

#div6b {
	width: 100px;
	height: 100px;
	background-color: #136fc4;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div6b:hover {
	background-color: #dddbdb;
	}


#div6c {
	width: 100px;
	height: 100px;
	background-color: #358ee0;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div6c:hover {
	background-color: #dddbdb;
	}


#div6d {
	width: 100px;
	height: 100px;
	background-color: #88c1f8;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div6d:hover {
	background-color: #dddbdb;
	}

#div7a {
	width: 100px;
	height: 100px;
	background-color: #4c004a;
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 15px;
	}

#div7a:hover {
	background-color: #dddbdb;
	}

#div7b {
	width: 100px;
	height: 100px;
	background-color: #81117f;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div7b:hover {
	background-color: #dddbdb;
	}


#div7c {
	width: 100px;
	height: 100px;
	background-color: #b450b2;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div7c:hover {
	background-color: #dddbdb;
	}


#div7d {
	width: 100px;
	height: 100px;
	background-color: #d790d4;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div7d:hover {
	background-color: #dddbdb;
	}

#div8a {
	width: 100px;
	height: 100px;
	background-color: #970067;
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 15px;
	}

#div8a:hover {
	background-color: #dddbdb;
	}

#div8b {
	width: 100px;
	height: 100px;
	background-color: #c91796 ;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div8b:hover {
	background-color: #dddbdb;
	}


#div8c {
	width: 100px;
	height: 100px;
	background-color: #ff35c5;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div8c:hover {
	background-color: #dddbdb;
	}


#div8d {
	width: 100px;
	height: 100px;
	background-color: #ff81c4;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div8d:hover {
	background-color: #dddbdb;
	}



#div9a {
	width: 100px;
	height: 100px;
	background-color: #850708;
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 15px;
	}

#div9a:hover {
	background-color: #dddbdb;
	}



#div9b {
	width: 100px;
	height: 100px;
	background-color: #b11516;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div9b:hover {
	background-color: #dddbdb;
	}


#div9c {
	width: 100px;
	height: 100px;
	background-color: #e14747;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div9c:hover {
	background-color: #dddbdb;
	}


#div9d {
	width: 100px;
	height: 100px;
	background-color: #ec7c7b;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div9d:hover {
	background-color: #dddbdb;
	}



#div10a {
	width: 100px;
	height: 100px;
	background-color: #a46112;
    display: inline-block;
   margin-left: 0px;
    margin-bottom: 15px;
	}

#div10a:hover {
	background-color: #dddbdb;
	}

#div10b {
	width: 100px;
	height: 100px;
	background-color: #d98522;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div10b:hover {
	background-color: #dddbdb;
	}


#div10c {
	width: 100px;
	height: 100px;
	background-color: #e89d1d;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div10c:hover {
	background-color: #dddbdb;
	}


#div10d {
	width: 100px;
	height: 100px;
	background-color: #f4bc5b;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div10d:hover {
	background-color: #dddbdb;
	}

#div11a {
	width: 100px;
	height: 100px;
	background-color: #cfc204;
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 15px;
	}

#div11a:hover {
	background-color: #dddbdb;
	}

#div11b {
	width: 100px;
	height: 100px;
	background-color: #e8da08;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div11b:hover {
	background-color: #dddbdb;
	}


#div11c {
	width: 100px;
	height: 100px;
	background-color: #f5e81e;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div11c:hover {
	background-color: #dddbdb;
	}


#div11d {
	width: 100px;
	height: 100px;
	background-color: #f8f05f;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div11d:hover {
	background-color: #dddbdb;
	}

#div12a {
	width: 100px;
	height: 100px;
	background-color: #007236;
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 15px;
	}

#div12a:hover {
	background-color: #dddbdb;
	}

#div12b {
	width: 100px;
	height: 100px;
	background-color: #2b9728;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div12b:hover {
	background-color: #dddbdb;
	}


#div12c {
	width: 100px;
	height: 100px;
	background-color: #5dbb5b;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div12c:hover {
	background-color: #dddbdb;
	}


#div12d {
	width: 100px;
	height: 100px;
	background-color: #90d88e;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div12d:hover {
	background-color: #dddbdb;
	}

#div13a {
	width: 100px;
	height: 100px;
	background-color: #007c97;
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 15px;
	}

#div13a:hover {
	background-color: #dddbdb;
	}

#div13b {
	width: 100px;
	height: 100px;
	background-color: #2ca2c6;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div13b:hover {
	background-color: #dddbdb;
	}


#div13c {
	width: 100px;
	height: 100px;
	background-color: #2cccd6;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div13c:hover {
	background-color: #dddbdb;
	}


#div13d {
	width: 100px;
	height: 100px;
	background-color: #6feff0;
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
	}

#div13d:hover {
	background-color: #dddbdb;
	}


#divC1a {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 0%);
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC1a:hover {
	background-color: #dddbdb;
	}

#divC1b {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 25%);
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC1b:hover {
	background-color: #dddbdb;
	}


#divC1c {
	width: 100px;
	height: 100px;
    outline:#000 dotted thin;
	background-color: hsl(0, 0%, 50%);
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC1c:hover {
	background-color: #dddbdb;
	}


#divC1d {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 75%);
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC1d:hover {
	background-color: #dddbdb;
	}

#divC2a {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 0%);
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC2a:hover {
	background-color: #dddbdb;
	}

#divC2b {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 25%);
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC2b:hover {
	background-color: #dddbdb;
	}


#divC2c {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 50%);
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC1c:hover {
	background-color: #dddbdb;
	}


#divC2d {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 75%);
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC2d:hover {
	background-color: #dddbdb;
	}


#divC3a {
	width: 100px;
	height: 100px;
	background-color:hsl(0, 0%, 0%);
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC3a:hover {
	background-color: #dddbdb;
	}

#divC3b {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 25%);
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC3b:hover {
	background-color: #dddbdb;
	}


#divC3c {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 50%);
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC3c:hover {
	background-color: #dddbdb;
	}


#divC3d {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 75%);
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC3d:hover {
	background-color: #dddbdb;
	}


#divC4a {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 0%);
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC4a:hover {
	background-color: #dddbdb;
	}

#divC4b {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 25%);
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC4b:hover {
	background-color: #dddbdb;
	}


#divC4c {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 50%);
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC4c:hover {
	background-color: #dddbdb;
	}


#divC4d {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 75%);
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC4d:hover {
	background-color: #dddbdb;
	}


#divC5a {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 0%);
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC5a:hover {
	background-color: #dddbdb;
	}

#divC5b {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 25%);
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC5b:hover {
	background-color: #dddbdb;
	}


#divC5c {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 50%);
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC5c:hover {
	background-color: #dddbdb;
	}


#divC5d {
	width: 100px;
	height: 100px;
	background-color: hsl(0, 0%, 75%);
    display: inline-block;
    margin-left: -3px;
    margin-bottom: 15px;
    outline:#000 solid thin;
	}

#divC5d:hover {
	background-color: #dddbdb;
	}