/* Metro Tiles
-------------------------------------------------- */
/*
 * Metro UI CSS v 1.0.1
 * Copyright 2012 Sergey Pimenov
 * Licensed under the MIT Lilcense
 */
.bg-color-blue {
   background-color: #0072BC !important;
}
.bg-color-blueDark {
   background-color: #662D91 !important;
}
.bg-color-green {
   background-color: #01a31c !important;
}
.bg-color-greenDark {
   background-color: #008641 !important;
}
.bg-color-red {
   background-color: #bc1c48 !important;
}
.bg-color-yellow {
   background-color: #ffc40d !important;
}
.bg-color-orange {
   background-color: #CD4900 !important;
}
.bg-color-pink {
   background-color: #c3325f !important;
}
.bg-color-purple {
   background-color: #603cba !important;
}
.bg-color-darken {
   background-color: #1c1c1c !important;
}



.place-left {
   float: left;
}
.place-right {
   float: right;
}
.pos-rel {
   position: relative;
}
.pos-abs {
   position: absolute;
}
.pos-fix {
   position: fixed;
}


.top-left {
   position: absolute;
   top: 0;
   left: 0;
}
.top-right {
   position: absolute;
   top: 0;
   right: 0;
}
.bottom-right {
   position: absolute;
   bottom: 0;
   right: 0;
}
.bottom-left {
   position: absolute;
   bottom: 0;
   left: 0;
}



.metro {
   overflow: hidden;
   /*width: 940px;*/
}


.metro .carousel-control {
   top: 20%;
}
/*.metro #metro-carousel .carousel-control b {*/
   /*font-size: 40px;*/
   /*width: 40px;*/
   /*height: 40px;*/
   /*position: absolute;*/
   /*top: 0;*/
   /*left: 15px;*/
/*}*/

/*.metro #metro-carousel .carousel-control.left {*/
   /*margin-left: -40px;*/
/*}*/
/*.metro #metro-carousel .carousel-control.right b,*/
/*.metro #metro-carousel .carousel-control.right {*/
   /*left: 0;*/
   /*right: 15px;*/
/*}*/

/*.carousel-control {*/
   /*position: absolute;*/
   /*top: 40%;*/
   /*left: 15px;*/
   /*width: 40px;*/
   /*height: 40px;*/
   /*margin-top: -20px;*/
   /*font-size: 60px;*/
   /*font-weight: 100;*/
   /*line-height: 30px;*/
   /*background: #222222;*/
   /*border: 3px solid #ffffff;*/
   /*-webkit-border-radius: 23px;*/
   /*-moz-border-radius: 23px;*/
   /*border-radius: 23px;*/
   /*opacity: 1;*/
   /*filter: alpha(opacity=100);*/
/*}*/

/*.carousel-control.right {*/
   /*right: 15px;*/
   /*left: auto;*/
/*}*/

/*.carousel-control:hover {*/
   /*color: #ffffff;*/
   /*text-decoration: none;*/
   /*opacity: 0.9;*/
   /*filter: alpha(opacity=90);*/
/*}*/











/*.metro-sections {*/
   /*width: 10000px !important;*/
/*}*/

.metro .metro-sections {
   height: auto;
   position: relative;
   overflow: hidden;
   width: 10000px;
}

   .metro-sections h2 {
      margin-left: 5px;
      font-family: "Segoe UI",Arial,Helvetica,Sans-Serif;
      font-weight: 100;
      text-transform: lowercase;
   }

.metro .metro-sections .metro-section {
   position: relative;
   float: left;
   /*width: 810px !important;*/
   width: auto;
   height: auto;
   margin-right: 75px;
}
   /*.metro .metro-sections .metro-section .next-section {*/
      /*position: absolute;*/
      /*top: 0px;*/
      /*right: -40px;*/
      /*background: url(../img/next-black.png);*/
      /*height: 24px;*/
      /*width: 24px;*/
   /*}*/
   /*.metro .metro-sections .metro-section .next-section.back {*/
      /*background: url(../img/back-black.png);*/
   /*}*/


/* fixed widths for tile sections
   units are measured per square tile width, i.e.: tile-span-1 = 160px = 1 square tile width (including margin)
 */
.metro .metro-sections .metro-section.tile-span-1 { width: 160px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-2 { width: 320px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-3 { width: 480px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-4 { width: 640px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-5 { width: 640px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-6 { width: 800px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-7 { width: 960px; margin-left: 0;}
.metro .metro-sections .metro-section.tile-span-8 { width: 1120px; margin-left: 0;}


.metro .tile {
   display: block;
   background-color: #2d89f0;
   width: 150px;
   height: 150px;
   color: #fff;
   margin: 5px;
   float: left;
   position: relative;
   cursor: pointer;
   overflow: hidden;
   text-decoration: none;
   padding-bottom: 1px;
}
.metro .metro-sections .metro-section .tile * {
   /*font-family: Segoe UI, Tahoma, Arial, Verdana, sans-serif;*/
}
.metro .tile:hover {
   outline: 3px #225a68 solid;
}



.metro .tile .tile-icon-large {
   margin-top: 20px;
   margin-left: 0px;
   display: table-cell;
   vertical-align: middle !important;
   text-align: center;
   width: 150px;
   padding-top: 20px;
}
.metro .tile .tile-icon-large img {
   width: 96px;
   height: 96px;
}
.metro .tile .tile-icon-cover {
   margin-top: 20px;
   margin-left: 0px;
   display: table-cell;
   vertical-align: middle !important;
   text-align: center;
   width: 150px;
   padding-top: 30px;
}
   .metro .tile .tile-icon-cover img {
      max-width: 90px;
      height: 90px;
   }

.metro .tile .tile-icon {
   position: absolute;
   bottom: 10px;
   left: 20px;
   width: 32px;
   height: 32px;
}

.metro .tile .tile-label {
   position: absolute;
   bottom: 10px;
   left: 20px;
   font-size: 14px;
   color: #fff;
}

/* small caption on top of tile */
.metro .tile .tile-caption {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 130px;
   padding: 2px 10px;
   border-bottom: 1px #ff4500 solid;
   background: #fff;
   font-size: 14px;
   color: #000;
   font-size: 10px;
   text-align: right;
}
.metro .tile .tile-header {
   font-size: 19px;
   color: #7ac479;
   text-align: left;
   margin: 20px;
}
/* little numeric count on the bottom-right margin of the tile */
.metro .tile .tile-counter {
   position: absolute;
   right: 20px;
   bottom: 10px;
   font-size: 14px;
   font-weight: normal;
}
.metro .tile .tile-text {
   text-align: left;
   margin-top: 20px;
   margin-left: 20px;
   font-size: 12px;
}

.metro .tile .tile-image {
   padding: 0px;
}
   .metro .tile .tile-image img {
      min-height: 100%;
      min-width: 100%;
   }

.metro .tile .tile-content-main {
   height: 150px;
   position: relative;
   overflow: hidden;
}
   .metro .tile .tile-content-sub {
      position: relative;
      margin: 1px;
      height: 50px;
      max-height: 148px;
      padding: 2px 5px;
      overflow: hidden;
      box-shadow-bottom: inset 0px 0px 3px #fff;
   }

.metro .tile.tile-double {
   width: 310px;
}
   .metro .tile.tile-double .tile-icon-large {
      margin-top: 20px;
      margin-left: 107px;
   }
   .metro .tile.tile-double .tile-icon-large img {
      width: 96px;
      height: 96px;
   }
   .metro .tile.tile-double .tile-icon-cover,
   .metro .tile.tile-double .tile-icon-large {
      width: 310px;
   }



/* Metro Tiles Templates
-------------------------------------------------- */

/* Text Only Tiles
-------------------------------------------------- */

.metro .tile.tilesquareblock .text-big {
   margin: 10px 20px 5px;
   font-size: 74px;
   line-height: 78px;
   text-align: left;
   overflow: hidden;
}
.metro .tile.tilesquareblock .text {
   margin-left: 20px;
   font-size: 13px;
   font-weight: bold;
   text-align: left;
   overflow: hidden;
}


.metro .tile.tilesquaretext01 .text-header,
.metro .tile.tilesquaretext02 .text-header,
.metro .tile.tilesquarepeekimageandtext01 .text-header,
.metro .tile.tilesquarepeekimageandtext02 .text-header,
.metro .tile.tilewidetext01 .text-header,
.metro .tile.tilewidetext02 .text-header,
.metro .tile.tilewidetext07 .text-header,
.metro .tile.tilewidetext09 .text-header,
.metro .tile.tilewidetext10 .text-header,
.metro .tile.tilewidesmallimageandtext02 .text-header,
.metro .tile.tilewidesmallimageandtext04 .text-header {
   margin: 10px 20px 5px;
   font-size: 36px;
   line-height: 38px;
   text-align: left;
   overflow: hidden;
}

.metro .tile.tilesquaretext01 .text,
.metro .tile.tilesquaretext03 .text,
.metro .tile.tilesquarepeekimageandtext01 .text,
.metro .tile.tilesquarepeekimageandtext03 .text,
.metro .tile.tilewidesmallimageandtext02 .text,
.metro .tile.tilewidetext01 .text,
.metro .tile.tilewidetext02 .text,
.metro .tile.tilewidetext05 .text {
   margin-left: 20px;
   font-size: 15px;
   line-height: 18px;
   height: 18px;
   font-weight: normal;
   text-align: left;
   overflow: hidden;
}

.metro .tile.tilesquaretext02 .text,
.metro .tile.tilewidetext09 .text {
   margin: 0 20px;
   font-size: 13px;
   font-weight: normal;
   text-align: left;
   max-height: 76px;
   overflow: hidden;
}

/* TODO: remove this and add a default 20px padding to ".tile" */
.metro .tile.tilesquaretext03 .tile-inner {
   padding-top: 20px;
}



.metro .tile.tilesquaretext04 .text,
.metro .tile.tilewidesmallimageandtext03 .text,
.metro .tile.tilewidesmallimageandtext04 .text,
.metro .tile.tilesquarepeekimageandtext04 .text {
   margin: 20px;
   font-size: 13px;
   font-weight: normal;
   text-align: left;
   max-height: 76px;
   overflow: hidden;
}


/* Image Only Tiles
-------------------------------------------------- */
.metro .tile.tilesquareimage {
   display: table-cell;
   vertical-align: middle !important;
   text-align: center;

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


/* Square peek templates
-------------------------------------------------- */

.metro .tile.tilesquarepeekimageandtext01,
.metro .tile.tilesquarepeekimageandtext02,
.metro .tile.tilesquarepeekimageandtext03,
.metro .tile.tilesquarepeekimageandtext04 {
   height: 300px;
}

.metro .tile.tilesquarepeekimageandtext01 img,
.metro .tile.tilesquarepeekimageandtext02 img {
   max-width: 150px;
   max-height: 150px;
}

.metro .tile.tilesquarepeekimageandtext02 .text {
   margin: 0 20px;
   font-size: 13px;
   font-weight: normal;
   text-align: left;
   max-height: 56px;
   overflow: hidden;
}


/* Wide Tiles
-------------------------------------------------- */

/* TODO: remove this and add a class "tile-wide" */
.metro .tile.tilewidetext01,
.metro .tile.tilewidetext02,
.metro .tile.tilewidetext03,
.metro .tile.tilewidetext04,
.metro .tile.tilewidetext05,
.metro .tile.tilewidetext06,
.metro .tile.tilewidetext07,
.metro .tile.tilewidetext08,
.metro .tile.tilewidetext09,
.metro .tile.tilewidetext10,
.metro .tile.tilewidetext11,
.metro .tile.tilewideimage,
.metro .tile.tilewideimagecollection,
.metro .tile.tilewideimageandtext01,
.metro .tile.tilewideimageandtext02,
.metro .tile.tilewideblockandtext01,
.metro .tile.tilewideblockandtext02,
.metro .tile.tilewidesmallimageandtext01,
.metro .tile.tilewidesmallimageandtext02,
.metro .tile.tilewidesmallimageandtext03,
.metro .tile.tilewidesmallimageandtext04 {
   width: 310px;
}



.metro .tile.tilewidetext02 .column,
.metro .tile.tilewidetext06 .column,
.metro .tile.tilewidetext07 .column,
.metro .tile.tilewidetext10 .column {
   display: block;
   float: left;
   width: 150px;
}

.metro .tile.tilewidetext05 .tile-inner,
.metro .tile.tilewidetext06 .tile-inner {
   padding: 20px;
}

.metro .tile.tilewidetext03 .text {
   margin: 10px 20px 5px;
   font-size: 24px;
   line-height: 38px;
   text-align: left;
   max-height: 120px;
   overflow: hidden;
}


.metro .tile.tilewidetext04 .text {
   margin: 20px;
   font-size: 15px;
   font-weight: normal;
   text-align: left;
   max-height: 120px;
   overflow: hidden;
}

.metro .tile.tilewidetext05 .text {
   margin-right: 20px;
   width: 270px;
   height: 15px;
   overflow: hidden;
}

.metro .tile.tilewidetext06 .column {
   width: 130px;
}

.metro .tile.tilewidetext07 .column-labels,
.metro .tile.tilewidetext08 .column-labels {
   display: block;
   float: left;
   margin-left: 20px;
   width: 90px;
}
.metro .tile.tilewidetext07 .column,
.metro .tile.tilewidetext08 .column {
   margin-right: 20px;
   width: 180px;
}
.metro .tile.tilewidetext07 .column-labels .text,
.metro .tile.tilewidetext08 .column-labels .text,
.metro .tile.tilewidetext10 .column-labels .text,
.metro .tile.tilewidetext11 .column-labels .text {
   font-size: 15px;
   font-weight: normal;
   text-align: left;
   overflow: hidden;
}
.metro .tile.tilewidetext08,
.metro .tile.tilewidetext11 {
   padding-top: 20px;
}




.metro .tile.tilewidetext10 .column-labels,
.metro .tile.tilewidetext11 .column-labels {
   display: block;
   float: left;
   margin-left: 20px;
   width: 70px;
}
.metro .tile.tilewidetext10 .column,
.metro .tile.tilewidetext11 .column {
   margin-right: 20px;
   width: 200px;
}



/* Wide Image Only Tiles
-------------------------------------------------- */
.metro .tile.tilewideimage {
   display: table-cell;
   vertical-align: middle !important;
   text-align: center;
}

.metro .tile.tilewideimage img,
.metro .tile.tilewideimageandtext01 img {
   max-width: 310px;
   max-height: 150px;
}


.metro .tile.tilewideimagecollection .tile-image-main {
   display: inline-block;
   float: left;
   max-width: 160px;
   max-height: 150px;
}

.metro .tile.tilewideimagecollection .tile-small-images {
   display: inline-block;
   float: left;
   width: 150px;
   height: 150px;
}
.metro .tile.tilewideimagecollection .tile-small-images img {
   display: inline-block;
   float: left;
   max-width: 75px;
   max-height: 75px;
}


/* Wide image-and-text templates
-------------------------------------------------- */
.metro .tile.tilewideimageandtext01 .tile-image-wrapper,
.metro .tile.tilewideimageandtext02 .tile-image-wrapper {
   display: block;
   height: 102px;
   overflow: hidden;
}

.metro .tile.tilewideimageandtext01 .text {
   margin-left: 20px;
   margin-right: 20px;
   font-size: 15px;
   font-weight: normal;
   line-height: 24px;
   text-align: left;
   overflow: hidden;
   max-height: 48px;
}

.metro .tile.tilewideimageandtext02 .text {
   margin-left: 20px;
   margin-right: 20px;
   font-size: 15px;
   font-weight: normal;
   line-height: 24px;
   text-align: left;
   overflow: hidden;
   height: 24px;
}


.metro .tile.tilewidesmallimageandtext01 .tile-image-wrapper,
.metro .tile.tilewidesmallimageandtext02 .tile-image-wrapper,
.metro .tile.tilewidesmallimageandtext03 .tile-image-wrapper,
.metro .tile.tilewidesmallimageandtext04 .tile-image-wrapper {
   display: inline-block;
   float: left;
   margin: 20px;
   max-width: 78px;
   max-height: 78px;
}
.metro .tile.tilewidesmallimageandtext01 .text-header {
   font-size: 15px;
   line-height: 18px;
   margin: 20px 20px 0 5px;
   max-height: 88px;
   overflow: hidden;
   text-align: left;
}



/* Wide Peek Tiles
-------------------------------------------------- */

/* TODO: remove this and add a class "tile-widepeek" */
.metro .tile.tilewidepeekimagecollection01 {
   width: 310px;
   height: 300px;
}

