body {
  background-color: #fff;
  margin:0px;
  font-family:Calibri;
  padding-top: 4.5rem;
}

#head {
  color: white;
  width:100%;
  
  background-color: black;
  padding:	20px;
  position: top;
}
#content{
	padding:10px;
}
.navbar{
    padding: .5rem 1rem
}
.Canvas {
	border:1px solid black;
	width:300px;
	height:200px;
}
.button a{
    font-family: Roboto,sans-serif;
    border-radius: 4px;
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.42857;
    padding: 10px 20px;
    cursor: pointer;
    display: inline-block;
    border: 1px solid transparent;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    outline: none;
    margin-bottom: 5px;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    background-image: none;
	box-shadow: 0 1px 6px rgba(57,73,76,.25);
	color: #fff;
	Background: black;
	float:right;
	width:100px;
	
}

.button a:hover{

    background-color: #d16234;
}
.chart{
	float:left;
}
.systeme{
	width:350px;
	height:300px;
	float: left;
margin: 20px;
}
.MicroBitInfo{
	width:350px;
	height:250px;
	background:#FFF;
	padding:5px;
	border-radius: 4px;
	box-shadow: 0 1px 6px #999;
}
.MicroBitInfo h2{
	margin:0px;
}

body{margin-top:20px;}

.card-big-shadow {
    max-width: 320px;
    position: relative;
}

.coloured-cards .card {
    margin-top: 30px;
}

.card[data-radius="none"] {
    border-radius: 0px;
}
.card {
    border-radius: 8px;
    box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
    background-color: #FFFFFF;
    color: #252422;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}


.card[data-background="image"] .title, .card[data-background="image"] .stats, .card[data-background="image"] .category, .card[data-background="image"] .description, .card[data-background="image"] .content, .card[data-background="image"] .card-footer, .card[data-background="image"] small, .card[data-background="image"] .content a, .card[data-background="color"] .title, .card[data-background="color"] .stats, .card[data-background="color"] .category, .card[data-background="color"] .description, .card[data-background="color"] .content, .card[data-background="color"] .card-footer, .card[data-background="color"] small, .card[data-background="color"] .content a {
    color: #FFFFFF;
}
.card.card-just-text .content {
    padding: 50px 65px;
    text-align: center;
}
.card .content {
    padding: 20px 20px 10px 20px;
}
.card[data-color="blue"] .category {
    color: #7a9e9f;
}

.card .category, .card .label {
    font-size: 14px;
    margin-bottom: 0px;
}
.card-big-shadow:before {
    background-image: url("http://static.tumblr.com/i21wc39/coTmrkw40/shadow.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    bottom: -12%;
    content: "";
    display: block;
    left: -12%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}
h4, .h4 {
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.2em;
}
h6, .h6 {
    font-size: 0.9em;
    font-weight: 600;
    text-transform: uppercase;
}
.card .description {
    font-size: 16px;
    color: #66615b;
}
.content-card{
    margin-top:30px;    
}
a:hover, a:focus {
    text-decoration: none;
}

/*======== COLORS ===========*/
.card[data-color="blue"] {
    background: #b8d8d8;
}
.card[data-color="blue"] .description {
    color: #506568;
}

.card[data-color="green"] {
    background: #d5e5a3;
}
.card[data-color="green"] .description {
    color: #60773d;
}
.card[data-color="green"] .category {
    color: #92ac56;
}

.card[data-color="yellow"] {
    background: #ffe28c;
}
.card[data-color="yellow"] .description {
    color: #b25825;
}
.card[data-color="yellow"] .category {
    color: #d88715;
}

.card[data-color="brown"] {
    background: #d6c1ab;
}
.card[data-color="brown"] .description {
    color: #75442e;
}
.card[data-color="brown"] .category {
    color: #a47e65;
}

.card[data-color="purple"] {
    background: #baa9ba;
}
.card[data-color="purple"] .description {
    color: #3a283d;
}
.card[data-color="purple"] .category {
    color: #5a283d;
}

.card[data-color="orange"] {
    background: #ff8f5e;
}
.card[data-color="orange"] .description {
    color: #772510;
}
.card[data-color="orange"] .category {
    color: #e95e37;
}

.fullscreen:-webkit-full-screen {
  width: auto !important;
  height: auto !important;
  margin:auto !important;
}
 .fullscreen:-moz-full-screen {
  width: auto !important;
  height: auto !important;
  margin:auto !important;
}
 .fullscreen:-ms-fullscreen {
  width: auto !important;
  height: auto !important;
  margin:auto !important;
}