@import url(../fonts/linecons/style.css);

/**** Metro Layout ****/
.metro-layout {
  width: 100%;
  height: 100%;
}

.views-metro-container {
  width: 100%;
  height: 100%;
}

.views-metro-item {
  color: #fff;
  padding: 0;
  margin: 0 0 10px;
  float: left;
  cursor: pointer;
  overflow: hidden;
  z-index: 9;
  height: 195px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
   box-sizing: border-box;
  width: 33.33%;
}

.views-metro-item:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.views-metro-item .item-inner {
  margin-right: 10px;
  position: relative;
}

.views-metro-item ul {
  margin: 0 0 0 -10px;
}

.views-metro-item ul li {
  width: 50%;
  height: 195px;
  padding: 0 0 0 10px;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
   box-sizing: border-box;
   position: relative;
   list-style: none;
}

.views-metro-item  li a {
  background: #0098aa;
  color: #fff;
  height: 100%;
  display: block;
  font-family: avantgarde,sans-serif;
  font-size: 1.833em;
  padding-top: 130px;
  text-transform: uppercase;
  text-align: center;
  -webkit-transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  -ms-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
   box-sizing: border-box;
}

.views-metro-item li a:hover,
.views-metro-item li a:focus {
   text-decoration: none;
}

.views-metro-item .field-group-wrapper {
  position: absolute;
  top: 0;
  height: 100%;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  transform: translateY(145px);
  -webkit-transform: translateY(145px);
  -moz-transform: translateY(145px);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  width: 100%;
}

.views-metro-item:hover .field-group-wrapper {
  background-color: #0098aa;
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  padding: 20px;
}

.views-metro-item .views-field-field-image {
  margin-bottom: 0;
}

.views-metro-item .views-field-title a,
.views-metro-item .views-field-title a:hover,
.views-metro-item .views-field-title a:focus {
  color: #fff !important;
  display: block;
  font-size: 1.5em;
  margin-bottom: 15px;
}

.views-metro-item .views-field-changed {
  font-style: italic;
}

/* Icons */
.views-metro-item li a:before {
  font-family: "linecons";
  /*content: "\e01b";*/
  font-size: 60px;
  position: absolute;
  top: 70px;
  margin-bottom: 40px;
  left: 50%;
  margin-left: -25px;
  -webkit-transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  -ms-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
}

.views-metro-item li a.home-link:before {
  content: "\e02a";
}

.views-metro-item li a.about-link:before {
  content: "\e014";
}

.views-metro-item li a.about-link {
  background: #00a100;
}

.views-metro-item li a.services-link:before {
  content: "\e00e";
}

.views-metro-item li a.services-link {
  background: #d34826;
}

.views-metro-item li a.portfolio-link:before {
  content: "\e01b";
}

.views-metro-item li a.portfolio-link {
  background: #603cbb;
}

.views-metro-item li a.blogs-link:before {
  content: "\e018";
}

.views-metro-item li a.blogs-link {
  background: #0a59c1;
}

.views-metro-item li a.contact-link:before {
  content: "\e019";
}

.views-metro-item li a.contact-link {
  background: #8f0097;
}

.views-metro-item li a.metro-icon-music:before { content: "\e022"; } /* '' */
.views-metro-item li a.metro-icon-search:before { content: '\e009'; } /* '' */
.views-metro-item li a.metro-icon-mail:before { content: '\e019'; } /* '' */
.views-metro-item li a.metro-icon-heart:before { content: '\e000'; } /* '' */
.views-metro-item li a.metro-icon-star:before { content: '\e002'; } /* '' */
.views-metro-item li a.metro-icon-user:before { content: '\e007'; } /* '' */
.views-metro-item li a.metro-icon-videocam:before { content: '\e005'; } /* '' */
.views-metro-item li a.metro-icon-camera:before { content: '\e00b'; } /* '' */
.views-metro-item li a.metro-icon-photo:before { content: '\e01b'; } /* '' */
.views-metro-item li a.metro-icon-attach:before { content: '\e029'; } /* '' */
.views-metro-item li a.metro-icon-lock:before { content: '\e00d'; } /* '' */
.views-metro-item li a.metro-icon-eye:before { content: '\e013'; } /* '' */
.views-metro-item li a.metro-icon-tag:before { content: '\e00c'; } /* '' */
.views-metro-item li a.metro-icon-thumbs-up:before { content: '\e01a'; } /* '' */
.views-metro-item li a.metro-icon-pencil:before { content: '\e00f'; } /* '' */
.views-metro-item li a.metro-icon-comment:before { content: '\e014'; } /* '' */
.views-metro-item li a.metro-icon-location:before { content: '\e012'; } /* '' */
.views-metro-item li a.metro-icon-cup:before { content: '\e016'; } /* '' */
.views-metro-item li a.metro-icon-trash:before { content: '\e006'; } /* '' */
.views-metro-item li a.metro-icon-doc:before { content: '\e018'; } /* '' */
.views-metro-item li a.metro-icon-note:before { content: '\e01c'; } /* '' */
.views-metro-item li a.metro-icon-cog:before { content: '\e00a'; } /* '' */
.views-metro-item li a.metro-icon-params:before { content: '\e01f'; } /* '' */
.views-metro-item li a.metro-icon-calendar:before { content: '\e02b'; } /* '' */
.views-metro-item li a.metro-icon-sound:before { content: '\e004'; } /* '' */
.views-metro-item li a.metro-icon-clock:before { content: '\e01d'; } /* '' */
.views-metro-item li a.metro-icon-lightbulb:before { content: '\e00e'; } /* '' */
.views-metro-item li a.metro-icon-tv:before { content: '\e003'; } /* '' */
.views-metro-item li a.metro-icon-desktop:before { content: '\e011'; } /* '' */
.views-metro-item li a.metro-icon-mobile:before { content: '\e017'; } /* '' */
.views-metro-item li a.metro-icon-cd:before { content: '\e02d'; } /* '' */
.views-metro-item li a.metro-icon-inbox:before { content: '\e015'; } /* '' */
.views-metro-item li a.metro-icon-globe:before { content: '\e02f'; } /* '' */
.views-metro-item li a.metro-icon-cloud:before { content: '\e001'; } /* '' */
.views-metro-item li a.metro-icon-paper-plane:before { content: '\e01e'; } /* '' */
.views-metro-item li a.metro-icon-fire:before { content: '\e028'; } /* '' */
.views-metro-item li a.metro-icon-graduation-cap:before { content: '\e024'; } /* '' */
.views-metro-item li a.metro-icon-megaphone:before { content: '\e023'; } /* '' */
.views-metro-item li a.metro-icon-database:before { content: '\e021'; } /* '' */
.views-metro-item li a.metro-icon-key:before { content: '\e008'; } /* '' */
.views-metro-item li a.metro-icon-beaker:before { content: '\e025'; } /* '' */
.views-metro-item li a.metro-icon-truck:before { content: '\e02e'; } /* '' */
.views-metro-item li a.metro-icon-money:before { content: '\e020'; } /* '' */
.views-metro-item li a.metro-icon-food:before { content: '\e026'; } /* '' */
.views-metro-item li a.metro-icon-shop:before { content: '\e02a'; } /* '' */
.views-metro-item li a.metro-icon-diamond:before { content: '\e010'; } /* '' */
.views-metro-item li a.metro-icon-t-shirt:before { content: '\e027'; } /* '' */
.views-metro-item li a.metro-icon-wallet:before { content: '\e02c'; } /* '' */

.views-metro-item li a.metro-fa:before { font-family: FontAwesome; font-size: 80px; width: 100px; margin-left: -45px;}

.views-metro-item li:hover a:before {
  top: 77px;
}

/* Tablet Support */
@media (max-width: 1200px) {
.views-metro-item .views-field-field-image img {
  height: 195px;
}
}

@media (min-width: 720px) and (max-width: 959px) {
.views-metro-item {
  width: 50%;
}

.views-metro-item .views-field-field-image img {
  height: 195px;
}
}

/* Mobile Support */
@media (max-width: 719px) {
  .views-metro-item {
  width: 100%;
}

.views-metro-item .views-field-field-image img {
  height: auto;
  width: 100%;
}

.views-metro-item {
  height: auto;
}

.views-metro-item .item-inner {
  margin-right: 0;
}
}