/* Planning custom styles */ 
/* Flatshadow Styles */

.flat-block {
  background: rgba(170, 170, 170, 0.15);
  margin: 10px 10px 0px 0px;
  padding: 20px 16px 20px 20px;
  border: 0px;
  float: left;
}
.flat-block.dark {
  background: rgba(99, 105, 108, 0.15);
}
.flat-block.blue {
  background: rgba(119, 204, 238, 0.15);
}
.flat-block.purple {
  background: rgba(204, 119, 238, 0.15);
}
.flat-block.pink {
  background: rgba(238, 119, 204, 0.15);
}
.flat-block.orange {
  background: rgba(255, 136, 68, 0.15);
}
.flat-block.yellow {
  background: rgba(255, 179, 25, 0.15);
}
div.flat-block ul li {
  margin: 0px;
  padding: 0px;
  border: 0px;
  display: inline-block;
}
div.flat-block ul li a {
  background: #f1f1f1;
  margin: 0 4px 0 0px;
  padding: 10px 20px;
  border: 0;
  float: left;
  text-decoration: none;
  -webkit-box-shadow: 2px 3px 0 #b7b7b7;
  -moz-box-shadow: 2px 3px 0 #b7b7b7;
  -ms-box-shadow: 2px 3px 0 #b7b7b7;
  -o-box-shadow: 2px 3px 0 #b7b7b7;
  box-shadow: 2px 3px 0 #b7b7b7;
  color: #919191 !important;
}
div.flat-block ul li a:hover,
div.flat-block ul li a:focus {
  background: #ffffff;
  -webkit-box-shadow: 2px 3px 0 #d0d0d0;
  -moz-box-shadow: 2px 3px 0 #d0d0d0;
  -ms-box-shadow: 2px 3px 0 #d0d0d0;
  -o-box-shadow: 2px 3px 0 #d0d0d0;
  box-shadow: 2px 3px 0 #d0d0d0;
  color: #777777 !important;
}
div.flat-block ul li a:active {
   outline: none !important;
  -webkit-transform: translate(2px, 3px);
  -moz-transform: translate(2px, 3px);
  -ms-transform: translate(2px, 3px);
  -o-transform: translate(2px, 3px);
  transform: translate(2px, 3px);
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
div.flat-block ul li a.active {
  background: #919191;
  -webkit-box-shadow: 2px 3px 0 #777777;
  -moz-box-shadow: 2px 3px 0 #777777;
  -ms-box-shadow: 2px 3px 0 #777777;
  -o-box-shadow: 2px 3px 0 #777777;
  box-shadow: 2px 3px 0 #777777;
  color: #ffffff !important;
}
div.flat-block ul li a.active:hover,
div.flat-block ul li a.active:focus {
  background: #9d9d9d;
  -webkit-box-shadow: 2px 3px 0 #848484;
  -moz-box-shadow: 2px 3px 0 #848484;
  -ms-box-shadow: 2px 3px 0 #848484;
  -o-box-shadow: 2px 3px 0 #848484;
  box-shadow: 2px 3px 0 #848484;
}
div.flat-block ul li a.active:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
div.flat-block ul li a.dark {
  background: #63696C;
  -webkit-box-shadow: 2px 3px 0 #3e4244;
  -moz-box-shadow: 2px 3px 0 #3e4244;
  -ms-box-shadow: 2px 3px 0 #3e4244;
  -o-box-shadow: 2px 3px 0 #3e4244;
  box-shadow: 2px 3px 0 #3e4244;
  color: #262829 !important;
}
div.flat-block ul li a.dark:hover,
div.flat-block ul li a.dark:focus {
  background: #7c8386;
  -webkit-box-shadow: 2px 3px 0 #575c5f;
  -moz-box-shadow: 2px 3px 0 #575c5f;
  -ms-box-shadow: 2px 3px 0 #575c5f;
  -o-box-shadow: 2px 3px 0 #575c5f;
  box-shadow: 2px 3px 0 #575c5f;
  color: #3e4244 !important;
}
div.flat-block ul li a.dark:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
div.flat-block ul li a.dark.active {
  background: #323537;
  -webkit-box-shadow: 2px 3px 0 #000000;
  -moz-box-shadow: 2px 3px 0 #000000;
  -ms-box-shadow: 2px 3px 0 #000000;
  -o-box-shadow: 2px 3px 0 #000000;
  box-shadow: 2px 3px 0 #000000;
  color: #cbced0 !important;
}
div.flat-block ul li a.dark.active:hover,
div.flat-block ul li a.dark.active:focus {
  background: #3e4244;
  -webkit-box-shadow: 2px 3px 0 #000000;
  -moz-box-shadow: 2px 3px 0 #000000;
  -ms-box-shadow: 2px 3px 0 #000000;
  -o-box-shadow: 2px 3px 0 #000000;
  box-shadow: 2px 3px 0 #000000;
}
div.flat-block ul li a.dark.active:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
div.flat-block ul li a.blue {
  background: #77CCEE;
  -webkit-box-shadow: 2px 3px 0 #4abbe8;
  -moz-box-shadow: 2px 3px 0 #4abbe8;
  -ms-box-shadow: 2px 3px 0 #4abbe8;
  -o-box-shadow: 2px 3px 0 #4abbe8;
  box-shadow: 2px 3px 0 #4abbe8;
  color: #1788b5 !important;
}
div.flat-block ul li a.blue:hover,
div.flat-block ul li a.blue:focus {
  background: #a4ddf4;
  -webkit-box-shadow: 2px 3px 0 #77CCEE;
  -moz-box-shadow: 2px 3px 0 #77CCEE;
  -ms-box-shadow: 2px 3px 0 #77CCEE;
  -o-box-shadow: 2px 3px 0 #77CCEE;
  box-shadow: 2px 3px 0 #77CCEE;
  color: #1788b5 !important;
}
div.flat-block ul li a.blue:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
div.flat-block ul li a.blue.active {
  background: #1788b5;
   outline: #1788b5;
   border:none;
  -webkit-box-shadow: 2px 3px 0 #116688;
  -moz-box-shadow: 2px 3px 0 #116688;
  -ms-box-shadow: 2px 3px 0 #116688;
  -o-box-shadow: 2px 3px 0 #116688;
  box-shadow: 2px 3px 0 #116688;
  color: #e8f7fc  !important;
}
div.flat-block ul li a.blue.active:hover,
div.flat-block ul li a.blue.active:focus {
  background: #1a99cc;
  -webkit-box-shadow: 2px 3px 0 #14779f;
  -moz-box-shadow: 2px 3px 0 #14779f;
  -ms-box-shadow: 2px 3px 0 #14779f;
  -o-box-shadow: 2px 3px 0 #14779f;
  box-shadow: 2px 3px 0 #14779f;
}
div.flat-block ul li a.blue.active:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
div.flat-block > ul li a.purple {
  background: #CC77EE;
  -webkit-box-shadow: 0px 3px 0 #bb4ae8;
  -moz-box-shadow: 0px 3px 0 #bb4ae8;
  -ms-box-shadow: 0px 3px 0 #bb4ae8;
  -o-box-shadow: 0px 3px 0 #bb4ae8;
  box-shadow: 0px 3px 0 #bb4ae8;
  color: #8817b5 !important;
}
div.flat-block ul li a.purple:hover,
div.flat-block ul li a.purple:focus {
  background: #dda4f4;
  -webkit-box-shadow: 0px 3px 0 #CC77EE;
  -moz-box-shadow: 0px 3px 0 #CC77EE;
  -ms-box-shadow: 0px 3px 0 #CC77EE;
  -o-box-shadow: 0px 3px 0 #CC77EE;
  box-shadow: 0px 3px 0 #CC77EE;
  color: #8817b5 !important;
}
div.flat-block ul li a.purple:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
div.flat-block ul li a.purple.active {
  background: #8817b5;
  -webkit-box-shadow: 2px 3px 0 #661188;
  -moz-box-shadow: 2px 3px 0 #661188;
  -ms-box-shadow: 2px 3px 0 #661188;
  -o-box-shadow: 2px 3px 0 #661188;
  box-shadow: 2px 3px 0 #661188;
  color: #f7e8fc !important;
}
div.flat-block ul li a.purple.active:hover,
div.flat-block ul li a.purple.active:focus {
  background: #991acc;
  -webkit-box-shadow: 2px 3px 0 #77149f;
  -moz-box-shadow: 2px 3px 0 #77149f;
  -ms-box-shadow: 2px 3px 0 #77149f;
  -o-box-shadow: 2px 3px 0 #77149f;
  box-shadow: 2px 3px 0 #77149f;
}
div.flat-block ul li a.purple.active:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
div.flat-block ul li a.pink {
  background: #EE77CC;
  -webkit-box-shadow: 2px 3px 0 #e84abb;
  -moz-box-shadow: 2px 3px 0 #e84abb;
  -ms-box-shadow: 2px 3px 0 #e84abb;
  -o-box-shadow: 2px 3px 0 #e84abb;
  box-shadow: 2px 3px 0 #e84abb;
  color: #b51788 !important;
}
div.flat-block ul li a.pink:hover,
div.flat-block ul li a.pink:focus {
  background: #f4a4dd;
  -webkit-box-shadow: 2px 3px 0 #EE77CC;
  -moz-box-shadow: 2px 3px 0 #EE77CC;
  -ms-box-shadow: 2px 3px 0 #EE77CC;
  -o-box-shadow: 2px 3px 0 #EE77CC;
  box-shadow: 2px 3px 0 #EE77CC;
  color: #b51788 !important;
}
div.flat-block ul li a.pink:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
div.flat-block ul li a.pink.active {
  background: #b51788;
  -webkit-box-shadow: 2px 3px 0 #881166;
  -moz-box-shadow: 2px 3px 0 #881166;
  -ms-box-shadow: 2px 3px 0 #881166;
  -o-box-shadow: 2px 3px 0 #881166;
  box-shadow: 2px 3px 0 #881166;
  color: #fce8f7 !important;
}
div.flat-block ul li a.pink.active:hover,
div.flat-block ul li a.pink.active:focus {
  background: #cc1a99;
  -webkit-box-shadow: 2px 3px 0 #9f1477;
  -moz-box-shadow: 2px 3px 0 #9f1477;
  -ms-box-shadow: 2px 3px 0 #9f1477;
  -o-box-shadow: 2px 3px 0 #9f1477;
  box-shadow: 2px 3px 0 #9f1477;
}
div.flat-block ul li a.pink.active:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
div.flat-block ul li a.orange {
  background: #FF8844;
  -webkit-box-shadow: 2px 3px 0 #ff6811;
  -moz-box-shadow: 2px 3px 0 #ff6811;
  -ms-box-shadow: 2px 3px 0 #ff6811;
  -o-box-shadow: 2px 3px 0 #ff6811;
  box-shadow: 2px 3px 0 #ff6811;
  color: #aa3e00 !important;
}
div.flat-block ul li a.orange:hover,
div.flat-block ul li a.orange:focus {
  background: #ffa877;
  -webkit-box-shadow: 2px 3px 0 #FF8844;
  -moz-box-shadow: 2px 3px 0 #FF8844;
  -ms-box-shadow: 2px 3px 0 #FF8844;
  -o-box-shadow: 2px 3px 0 #FF8844;
  box-shadow: 2px 3px 0 #FF8844;
  color: #aa3e00 !important;
}
div.flat-block ul li a.orange:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
div.flat-block ul li a.orange.active {
  background: #dd5000;
  -webkit-box-shadow: 2px 3px 0 #aa3e00;
  -moz-box-shadow: 2px 3px 0 #aa3e00;
  -ms-box-shadow: 2px 3px 0 #aa3e00;
  -o-box-shadow: 2px 3px 0 #aa3e00;
  box-shadow: 2px 3px 0 #aa3e00;
  color: #ffd9c3 !important;
}
div.flat-block ul li a.orange.active:hover,
div.flat-block ul li a.orange.active:focus {
  background: #f65a00;
  -webkit-box-shadow: 2px 3px 0 #c34700;
  -moz-box-shadow: 2px 3px 0 #c34700;
  -ms-box-shadow: 2px 3px 0 #c34700;
  -o-box-shadow: 2px 3px 0 #c34700;
  box-shadow: 2px 3px 0 #c34700;
}
div.flat-block ul li a.orange.active:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
div.flat-block ul li a.yellow {
  background: #FFCC66;
  -webkit-box-shadow: 2px 3px 0 #ffbb33;
  -moz-box-shadow: 2px 3px 0 #ffbb33;
  -ms-box-shadow: 2px 3px 0 #ffbb33;
  -o-box-shadow: 2px 3px 0 #ffbb33;
  box-shadow: 2px 3px 0 #ffbb33;
  color: #cc8800 !important;
}
div.flat-block ul li a.yellow:hover,
div.flat-block ul li a.yellow:focus {
  background: #ffdd99;
  -webkit-box-shadow: 2px 3px 0 #FFCC66;
  -moz-box-shadow: 2px 3px 0 #FFCC66;
  -ms-box-shadow: 2px 3px 0 #FFCC66;
  -o-box-shadow: 2px 3px 0 #FFCC66;
  box-shadow: 2px 3px 0 #FFCC66;
  color: #cc8800 !important;
}
div.flat-block ul li a.yellow:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
div.flat-block ul li a.yellow.active {
  background: #ffaa00;
  -webkit-box-shadow: 2px 3px 0 #cc8800;
  -moz-box-shadow: 2px 3px 0 #cc8800;
  -ms-box-shadow: 2px 3px 0 #cc8800;
  -o-box-shadow: 2px 3px 0 #cc8800;
  box-shadow: 2px 3px 0 #cc8800;
  color: #ffeecc !important;
}
div.flat-block ul li a.yellow.active:hover,
div.flat-block ul li a.yellow.active:focus {
  background: #ffb219;
  -webkit-box-shadow: 2px 3px 0 #e59900;
  -moz-box-shadow: 2px 3px 0 #e59900;
  -ms-box-shadow: 2px 3px 0 #e59900;
  -o-box-shadow: 2px 3px 0 #e59900;
  box-shadow: 2px 3px 0 #e59900;
}
div.flat-block ul li a.yellow.active:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
div.flat-block .rounded {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
}
div.flat-block .pill {
  -webkit-border-radius: 3em;
  -moz-border-radius: 3em;
  -ms-border-radius: 3em;
  -o-border-radius: 3em;
  border-radius: 3em;
}