/*!
 * BootMetro v1.0.0-alpha1
 *
 * Copyright 2012 Marcello Palmitessa
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */










.rowTile {
  margin-left: 0px;
  *zoom: 1;
}

.rowTile:before,
.rowTile:after {
  display: table;
  line-height: 0;
  content: "";
}

.rowTile:after {
  clear: both;
}



.span11 {
  width: 860px;
}

.span10 {
  width: 780px;
}

.span9 {
  width: 700px;
}

.span8 {
  width: 620px;
}

.span7 {
  width: 540px;
}

.span6 {
  width: 460px;
}

.span5 {
  width: 380px;
}

.span4 {
  width: 300px;
}

.span3 {
  width: 220px;
}

.span2 {
  width: 140px;
}

.span1 {
  width: 60px;
}

.offset12 {
  margin-left: 980px;
}

.offset11 {
  margin-left: 900px;
}

.offset10 {
  margin-left: 820px;
}

.offset9 {
  margin-left: 740px;
}

.offset8 {
  margin-left: 660px;
}

.offset7 {
  margin-left: 580px;
}

.offset6 {
  margin-left: 500px;
}

.offset5 {
  margin-left: 420px;
}

.offset4 {
  margin-left: 340px;
}

.offset3 {
  margin-left: 260px;
}

.offset2 {
  margin-left: 180px;
}

.offset1 {
  margin-left: 100px;
}

.row-fluid {
  width: 100%;
  *zoom: 1;
}

.row-fluid:before,
.row-fluid:after {
  display: table;
  line-height: 0;
  content: "";
}

.row-fluid:after {
  clear: both;
}

.row-fluid [class*="span"] {
  display: block;
  float: left;
  width: 100%;
  min-height: 30px;
  margin-left: 2.127659574468085%;
  *margin-left: 2.074468085106383%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}

.row-fluid .controls-rowTile [class*="span"] + [class*="span"] {
  margin-left: 2.127659574468085%;
}

.row-fluid .span12 {
  width: 100%;
  *width: 99.94680851063829%;
}

.row-fluid .span11 {
  width: 91.48936170212765%;
  *width: 91.43617021276594%;
}

.row-fluid .span10 {
  width: 82.97872340425532%;
  *width: 82.92553191489361%;
}

.row-fluid .span9 {
  width: 74.46808510638297%;
  *width: 74.41489361702126%;
}

.row-fluid .span8 {
  width: 65.95744680851064%;
  *width: 65.90425531914893%;
}

.row-fluid .span7 {
  width: 57.44680851063829%;
  *width: 57.39361702127659%;
}

.row-fluid .span6 {
  width: 48.93617021276595%;
  *width: 48.88297872340425%;
}

.row-fluid .span5 {
  width: 40.42553191489362%;
  *width: 40.37234042553192%;
}

.row-fluid .span4 {
  width: 31.914893617021278%;
  *width: 31.861702127659576%;
}

.row-fluid .span3 {
  width: 23.404255319148934%;
  *width: 23.351063829787233%;
}

.row-fluid .span2 {
  width: 14.893617021276595%;
  *width: 14.840425531914894%;
}

.row-fluid .span1 {
  width: 6.382978723404255%;
  *width: 6.329787234042553%;
}

.row-fluid .offset12 {
  margin-left: 104.25531914893617%;
  *margin-left: 104.14893617021275%;
}

.row-fluid .offset12:first-child {
  margin-left: 102.12765957446808%;
  *margin-left: 102.02127659574467%;
}

.row-fluid .offset11 {
  margin-left: 95.74468085106382%;
  *margin-left: 95.6382978723404%;
}

.row-fluid .offset11:first-child {
  margin-left: 93.61702127659574%;
  *margin-left: 93.51063829787232%;
}

.row-fluid .offset10 {
  margin-left: 87.23404255319149%;
  *margin-left: 87.12765957446807%;
}

.row-fluid .offset10:first-child {
  margin-left: 85.1063829787234%;
  *margin-left: 84.99999999999999%;
}

.row-fluid .offset9 {
  margin-left: 78.72340425531914%;
  *margin-left: 78.61702127659572%;
}

.row-fluid .offset9:first-child {
  margin-left: 76.59574468085106%;
  *margin-left: 76.48936170212764%;
}

.row-fluid .offset8 {
  margin-left: 70.2127659574468%;
  *margin-left: 70.10638297872339%;
}

.row-fluid .offset8:first-child {
  margin-left: 68.08510638297872%;
  *margin-left: 67.9787234042553%;
}

.row-fluid .offset7 {
  margin-left: 61.70212765957446%;
  *margin-left: 61.59574468085106%;
}

.row-fluid .offset7:first-child {
  margin-left: 59.574468085106375%;
  *margin-left: 59.46808510638297%;
}

.row-fluid .offset6 {
  margin-left: 53.191489361702125%;
  *margin-left: 53.085106382978715%;
}

.row-fluid .offset6:first-child {
  margin-left: 51.063829787234035%;
  *margin-left: 50.95744680851063%;
}

.row-fluid .offset5 {
  margin-left: 44.68085106382979%;
  *margin-left: 44.57446808510638%;
}

.row-fluid .offset5:first-child {
  margin-left: 42.5531914893617%;
  *margin-left: 42.4468085106383%;
}

.row-fluid .offset4 {
  margin-left: 36.170212765957444%;
  *margin-left: 36.06382978723405%;
}

.row-fluid .offset4:first-child {
  margin-left: 34.04255319148936%;
  *margin-left: 33.93617021276596%;
}

.row-fluid .offset3 {
  margin-left: 27.659574468085104%;
  *margin-left: 27.5531914893617%;
}

.row-fluid .offset3:first-child {
  margin-left: 25.53191489361702%;
  *margin-left: 25.425531914893618%;
}

.row-fluid .offset2 {
  margin-left: 19.148936170212764%;
  *margin-left: 19.04255319148936%;
}

.row-fluid .offset2:first-child {
  margin-left: 17.02127659574468%;
  *margin-left: 16.914893617021278%;
}

.row-fluid .offset1 {
  margin-left: 10.638297872340425%;
  *margin-left: 10.53191489361702%;
}

.row-fluid .offset1:first-child {
  margin-left: 8.51063829787234%;
  *margin-left: 8.404255319148938%;
}

[class*="span"].hide,
.row-fluid [class*="span"].hide {
  display: none;
}

[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
  float: right;
}

.containerTile {
	margin-bottom:50px;
  *zoom: 1;
}

.containerTile:before,
.containerTile:after {
  display: table;
  line-height: 0;
  content: "";
}

.containerTile:after {
  clear: both;
}

.containerTile-fluid {
  padding-right: 20px;
  padding-left: 20px;
  *zoom: 1;
}

.containerTile-fluid:before,
.containerTile-fluid:after {
  display: table;
  line-height: 0;
  content: "";
}

.containerTile-fluid:after {
  clear: both;
}

.tile-column {
  position: relative;
  float: left;
  width: auto;
  height: auto;
}

.tile-column-span-1 {
  position: relative;
  float: left;
  width: auto;
  width: 162px;
  height: auto;
  margin-left: 0 !important;
}

.tile-column-span-2 {
  position: relative;
  float: left;
  width: auto;
  width: 324px;
  height: auto;
  margin-left: 0 !important;
}

.tile-column-span-3 {
  position: relative;
  float: left;
  width: auto;
  width: 480px;
  height: auto;
  margin-left: 0 !important;
}

.tile-column-span-4 {
  position: relative;
  float: left;
  width: auto;
  width: 640px;
  height: auto;
  margin-left: 0 !important;
}

.tile-column-span-5 {
  position: relative;
  float: left;
  width: auto;
  width: 640px;
  height: auto;
  margin-left: 0 !important;
}

.tile-column-span-6 {
  position: relative;
  float: left;
  width: auto;
  width: 800px;
  height: auto;
  margin-left: 0 !important;
}

.tile-column-span-7 {
  position: relative;
  float: left;
  width: auto;
  width: 960px;
  height: auto;
  margin-left: 0 !important;
}

.tile-column-span-8 {
  position: relative;
  float: left;
  width: auto;
  width: 1120px;
  height: auto;
  margin-left: 0 !important;
}


.metro .tile {
  position: relative;
  display: block;
  float: left;
  width: 230px;
  height: 200px;
  padding: 0;
  margin: 0px;
  border-radius:20px;
  overflow: hidden;
  color: #FFF;
  text-decoration: none;
  cursor: pointer;
  background-color: #2C83EF;
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-background-clip: padding;
     -moz-background-clip: padding;
          background-clip: padding-box;
}


.metro2 .tile {
  position: relative;
  display: block;
  float: left;
  width: 230px;
  height: 200px;
  padding: 0;
  margin: 0px;
  border-radius:20px;
  overflow: hidden;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.5s ease;
  background-color: lightgrey;
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-background-clip: padding;
     -moz-background-clip: padding;
          background-clip: padding-box;
}


.brick {
  width: 230px;
  height: 200px;
  border-radius:20px;
position:absolute;
top:0px;
left:0px;
  color: #333;
	overflow:hidden;
  cursor: pointer;
  transition: background-color 0.5s ease;
  background-color: lightgrey;
  border: 1px solid rgba(255, 255, 255, 0.3);

}


.metro2 .tile:hover {
	  background-color: darkgrey;
}



.metro .tile.selected {
  /*border: 3px solid #003484;*/
}

.metro .tile.selected:after {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1001;
  display: block;
  width: 0;
  height: 0;
  border-top: 40px solid #003484;
  border-left: 40px solid transparent;
  content: "";
}

.metro .tile.selected:before {
  position: absolute;
  top: 0;
  right: 4px;
  z-index: 1002;
  font-family: 'icomoon';
  color: #FFFFFF;
  content: "\e379";
}

.metro .tile .app-label,
.metro .tile .label {
  position: absolute;
  bottom: 5px;
  left: 20px;
  font-size: 12px;
}

.metro .tile .app-count,
.metro .tile .count {
  position: absolute;
  right: 20px;
  bottom: 5px;
  font-size: 14px;
  font-weight: bold;
}

.metro .tile .image-wrapper span.icon {
  width: 80px;
  height: 80px;
  font-size: 80px;
  line-height: 80px;
}

.metro .tile .textover-wrapper {
  position: absolute;
  bottom: 0;
  height: 48px;
  padding: 2px 20px;
  background-color: inherit;
}

.metro .tile .textover-wrapper.transparent {
  background-color: rgba(0, 0, 0, 0.7);
}

.metro .tile .text-header {
  max-height: 36px;
  overflow: hidden;
  font-size: 34px;
  padding:5px;
  font-weight: 300;
  line-height: 36px;
  text-align: left;
}

.column-text {
	vertical-align: middle;
	text-align:center;
}


.metro .tile .text-header3 {
  max-height: 68px;
  overflow: hidden;
  font-size: 20px;
  
  font-weight: 200;
  line-height: 20px;
  text-align: center;
  display: inline-block;
vertical-align: middle;
  
}

.metro .tile .column3-text {
  display: block;
  float: left;
  width: 230px;
}

.metro .tile .column3-label {
  display: block;
  float: left;
  width: 50px;
}

.metro .tile .column2-text {
  display: block;
  float: left;
  width: 160px;
}

.metro .tile .column2-label {
  display: block;
  float: left;
  width: 90px;
}

.metro .tile .text2 {
  max-height: 44px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 300;
  line-height: 20px;
  text-align: left;
}

.metro .tile .text3 {
  max-height: 56px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 300;
  line-height: 18px;
  text-align: left;
}

.metro .tile .text4 {
  max-height: 72px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 300;
  line-height: 18px;
  text-align: left;
}

.metro .tile .column {
  display: block;
  float: left;
  width: 130px;
}

.metro .tile .text5 {
  max-height: 92px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 300;
  line-height: 18px;
  text-align: left;
}

.metro .tile .text {
  height: 18px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 300;
  line-height: 18px;
  text-align: left;
}

.metro .tile:hover {
  /*outline: 3px #225a68 solid;*/
}

.metro .tile.app .image-wrapper {
  display: block;
  width: 150px;
  height: 80px;
  padding: 8px 0;
  margin-top: 20px;
  text-align: center;
  vertical-align: middle;
}

.metro .tile.app .image-wrapper img {
  max-width: 80px;
  max-height: 80px;
  margin: 0 auto;
}

.metro .tile.square.text {
  width: 110px;
  height: 110px;
  padding: 20px;
}

.metro .tile.square.text .text-big {
  overflow: hidden;
  font-size: 76px;
  line-height: 76px;
  text-align: left;
}

.metro .tile.square.text.tilesquareblock .text {
  overflow: hidden;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}

.metro .tile.square.image {
  width: 150px;
  height: 150px;
  padding: 0;
}

.metro .tile.square.image img {
  max-width: 150px;
  max-height: 150px;
}

.metro .tile.squarepeek {
  width: 150px;
  height: 312px;
}

.metro .tile.squarepeek img {
  width: 150px;
  height: 150px;
  max-width: 150px;
  max-height: 150px;
}

.metro .tile.squarepeek .text-inner {
  width: 110px;
  height: 110px;
  padding: 20px;
}

.metro .tile.wide.app {
  width: 310px;
  height: 150px;
}

.metro .tile.wide.app .image-wrapper {
  width: 310px;
}

.metro .tile.wide.text {
  width: 270px;
  height: 110px;
  padding: 20px;
}

.metro .tile.wide.text .column-text-big {
  display: block;
  float: left;
  width: 80px;
  margin-left: 10px;
}

.metro .tile.wide.text .column-text-big .text-big {
  overflow: hidden;
  font-size: 74px;
  line-height: 60px;
  text-align: right;
}

.metro .tile.wide.text .column-text {
  display: block;
  float: left;
  width: 180px;
  
  vertical-align:middle;
	text-align:center;
}


.column-text {
	  height:68px;
	  line-height:68px;
}


.metro .tile.wide.imagetext {
  width: 270px;
  height: 110px;
  padding: 20px;
}

.metro .tile.wide.imagetext .image-wrapper {
  display: block;
  float: left;
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.metro .tile.wide.imagetext .image-wrapper img {
  max-width: 80px;
  max-height: 80px;
}

.metro .tile.wide.imagetext .column-text {
  display: block;
  float: left;
  width: 180px;
}

.metro .tile.wide.image {
  width: 310px;
  height: 150px;
}

.metro .tile.wide.image img {
  max-width: 310px;
}

.metro .tile.wide.image .mini-tiles {
  display: inline-block;
  float: left;
  width: 152px;
  height: 150px;
}

.metro .tile.wide.image .mini-tiles img {
  display: inline-block;
  float: left;
  max-width: 75px;
  max-height: 75px;
  border-left: 1px solid #2A2A2A;
}

.metro .tile.wide.imagetext.wideimage {
  width: 310px;
  height: 150px;
  padding: 0;
}

.metro .tile.wide.image.collection img {
  float: left;
  max-width: 158px;
  max-height: 150px;
}

.metro .tile.widepeek {
  width: 310px;
  height: 300px;
}

.metro .tile.widepeek .tile {
  margin: 0;
}

.metro .tile.widepeek .tile:hover {
  outline: 0;
}

.metro .tile.square .textover-wrapper,
.metro .tile.squarepeek .textover-wrapper {
  width: 130px;
}

.metro .tile.wide .textover-wrapper,
.metro .tile.widepeek .textover-wrapper {
  width: 270px;
}

.metro-responsive-tiles .tile {
  position: relative;
  display: block;
  float: left;
  width: 100%;
  height: 150px;
  padding: 20px;
  margin: 5px;
  overflow: hidden;
  color: #FFF;
  text-decoration: none;
  cursor: pointer;
  background-color: #2C83EF;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}