:root {
  --main-bg-color: #343a40;
	--color-panel: #F58634;
  --color-sidebar: #FFF;
  --color-card:#ffd6bb;
}

i{
	color: var(--color-panel);
	width: 21px;
}
i:hover{
	color:#8f9d80;
}
.btn {
  color:black !important;
}
.btn i{
	color:black;
	width: 21px;
}


/* Main content */
.main {
	margin-left: 1px; /* Same as the width of the sidenav */
	padding: 10px;
	padding-top:0px;
	overflow:auto;
	position: fixed;
	z-index: 1;
	top: 65px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	transition: 0.5s all;

	background-repeat: no-repeat;
    background-attachment: fixed ;
    background-position: top ;
	-webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


.barra{
	background-color: var(--color-panel) !important;
	color:white;
}
.barra .navbar-nav>li>a{
	color:white;
}
.card-header, .card-footer{
  background-color: var(--color-card) !important;
}
.card-header{
  text-align: center;
  font-weight: bold;
}




@import url(http://weloveiconfonts.com/api/?family=fontawesome);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
.left {
  float: left;
}
.clear {
clear: both;
}

.buysblock {
  background: rgb(38,168,226);
}
.commentsblock {
  background: rgb(39,183,121);
}

.metroblock {
  width: 21em;
  padding: 0em 1em 1em 1em;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  margin: 1em;
  height:150px;
}

.metroblock h1, .metroblock h2, .metroblock .icon {
  font-weight: 300;
  margin: 0;
  padding: 0;
}
.metroblock h1, .metroblock .icon {
  font-size: 7em;
  text-align: center;
}
.metroblock .icon {
  margin-right: .2em;
}


.flotante{
	border: 1px solid silver;
    position: absolute;
    width: 800px;
    height: 300px;
    z-index: 50;
    background-color: white;
    overflow: auto;
	display:none;
	-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}