@charset "utf-8";
/*
  Theme Name: MetroMobile
  Theme URI: http://themeforest.net/user/Webbu
  Version: 1.3
  Author: Webbu Design
  Author URI: http://themeforest.net/user/Webbu
  License: miller mauro
  License URI:http://millermauro.com
  Description: Mobile Template from Webbu Design
*/

/* Import for other style sheets */

 @import url(bootstrap-white.css);
 @import url(tiles.css); /* Tile settings */
 @import url(style.css); /* Styles */
 @import url(font-awesome.css); /* Font Awesome */

/* Import Finish */

@font-face {
    font-family: "RobotoRegular";
    src: url('font/Roboto-Regular-webfont.eot');
    src: url('font/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Roboto-Regular-webfont.woff') format('woff'),
         url('font/Roboto-Regular-webfont.ttf') format('truetype'),
         url('font/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "RobotoLight";
    src: url('font/Roboto-Light-webfont.eot');
    src: url('font/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Roboto-Light-webfont.woff') format('woff'),
         url('font/Roboto-Light-webfont.ttf') format('truetype'),
         url('font/Roboto-Light-webfont.svg#RobotoLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ==========================================================================
   Metro Mobile HTML Template v1
   CSS Document
========================================================================== */

/* Custom BG - Change URL url('images/yourbg.jpg')*/
body{background-image: url(); background-repeat: no-repeat;}


html
{
	min-height:100%;
	
}
	
}

.scrollable
{	
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	overflow-y: auto !important; 
	overflow-x: hidden !important;

}
body{
	overflow-y: auto !important;
	overflow-x: hidden !important;
	width: 100%;
	max-height: 100%;
	-webkit-touch-callout: none;
}

/*--------------------------------------------------
GENERAL LAYOUT - Change "font-family:'Open Sans',sans-serif;" tags and write your own.
There are 5 tags that need to change.
These tags will change entire site fonts. http://fortawesome.github.io/Font-Awesome 
---------------------------------------------------*/
body{margin:0px; font-size:16px; font-family: "Segoe UI", "Segoe WP", "RobotoRegular", sans-serif; line-height:20px; font-smooth:always}

a{font-family:"Segoe UI", "Segoe WP",  'RobotoRegular', sans-serif; font-size:16px; font-smooth:always}

p{font-size:16px; font-family:"Segoe UI", "Segoe WP",  'RobotoRegular', sans-serif; font-smooth:always}

h1, h2, h3, h4, h5, h6{font-family:"Segoe UI", "Segoe WP",  'RobotoRegular', sans-serif; margin-bottom:5px; font-smooth:always}

li{font-family:"Segoe UI", "Segoe WP",  'RobotoRegular', sans-serif; line-height:18px; font-smooth:always}

/*--------------------------------------------------
GENERAL LAYOUT
---------------------------------------------------*/

h1{font-size:22px; line-height:32px; font-smooth:always}
h2{font-size:20px; line-height:26px; font-smooth:always}
h3{font-size:18px; font-smooth:always}
h4{font-size:14px; line-height:16px; font-smooth:always}
h5{font-size:9px; margin-bottom:5px; font-smooth:always}

.center{margin-left:auto; margin-right:auto;}
.left{float:left}
.right{float:right}
.demoicons{
	text-align:center;
	vertical-align:middle;
	padding-top:10px;
	margin-left: 2px;
	margin-right: 2px;
	margin-bottom: 5px;
	display: inline-block;
	background-color: #efefef;
	height: 32px;
	width: 32px;
	border-radius: 8px;
}
.resimgleft{margin-bottom:0px; margin-right:10px;}
.resimgright{margin-bottom:5px; margin-left:10px;}
.resimgcenter{margin-bottom:10px; margin-left:auto; margin-right:auto; display:block;}

#wrapper{
	width: auto !important;
	min-height: 100%;
	}

.webbutiles{ 
	overflow:hidden;
	margin-right: -10px;
	padding-left: 10px !important;
	}
header h1{margin-left:50px}
header{
	position: relative;
}
header .line{
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999;
	padding-bottom: 8px;
	margin-left: 12px;
	margin-right: 12px;
	opacity:.6;
	
	}
header .line2{
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999;
	padding-bottom: 8px;
	margin-left: 12px;
	margin-right: 12px;
	opacity:.6;
	padding-top:35px;
	}
.MiddleContent{
	margin-top: 15px;
	margin-left: 12px;
	margin-right: 12px;
	}

.linkbut{ position:absolute;left:10px;top:0px;z-index: 100;	cursor:pointer;}
.linkbuthome{ position:absolute;left:50px;top:0px;z-index: 100;	cursor:pointer;}
/* Main Container & Content & Logo */
.contents {
	height: 100%;
	min-height: 100%;
	width: 100%;
	overflow-y: auto;

	-webkit-overflow-scrolling: touch;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

	/*--------------------------------------------------
	CLEAR FLOATED ELEMENTS
	---------------------------------------------------*/
	/* http://sonspring.com/journal/clearing-floats */
	.clear{clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0}
	/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
	.clearfix:after{clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0}
	/* Hides from IE-mac */
	* html .clearfix { height: 1%;}
	.clearfix {
	display: block;
	height: 5px;
	margin-bottom:15px;
	}
	/* End hide from IE-mac */
	.hr{background-image:url(../images/hr.png); height:2px; background-repeat:repeat-x; margin-bottom:12px; margin-left:12px; margin-right:12px}
	.hr-full{background-image:url(../images/hr.png); height:2px; background-repeat:repeat-x; padding-bottom:12px}
	.hr-full-nopad{background-image:url(../images/hr.png); height:2px; background-repeat:repeat-x;}


	/*--------------------------------------------------
	MAIN LINK PROPERTIES
	---------------------------------------------------*/
	a, a:link, a:visited{ text-decoration:none}
	
	/* Hover Style Added */
	a:hover{ text-decoration:underline;color: #e73c50}
	a img, img{ border:none}
	
	
/*---------------------------------------------------------------------
MAIN MENU CONFIG
---------------------------------------------------------------------*/
	.menuBtn{margin-left:10px;background:transparent url(../images/menuBtn.png) top left no-repeat    !important; background-size:contain; width:31px; height:31px; background-size:contain; text-indent:-999em !important; display:block !important; -webkit-box-shadow:0 0px 0 rgba(150,150,150,.3) !important; box-shadow:0 0px 0 rgba(150,150,150,.3) !important; z-index:10000}
	.menuBtn{border:none}
	.menuBtn{background-size:contain !important}
	.menuBtn:hover{border:none !important}

	
/*---------------------------------------------------------------------
PORTFOLIO PAGE
---------------------------------------------------------------------*/
.portfolio{list-style:none; padding:0; margin:0px;}
.portfolio:after{clear:both; content:"."; display:block; height:0; visibility:hidden}
.portfolio li{
	float: left;
	border: 1px solid #ccc;
	background-color: #f7f7f7;
	opacity: 1;
	margin-top: 2px;
	margin-right: 2px;
	margin-bottom: 10px;
	margin-left: 2px;
}
.portfolio-three{width:31.27%;}
.portfolio-two{width:47.8%;}
.portfolio-one{width:97.5%;}

.portfolio li a{display:block; margin:0px}
.portfolio li a span{display:block; font-size:12px; font-weight:600; margin-top:3px; margin-right:1px; margin-bottom:3px; margin-left:3px; }
.portfolio li a p{display:block; font-size:12px; font-weight:normal; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-left:0px; color:#666;text-align:center;}
.portfolio img{margin-bottom:10px;opacity:1;}
.portfolio .portfolio-three img{display:block; width:100%; height:auto; }
.portfolio .portfolio-two img{display:block; width:100%; height:auto; }
.portfolio .portfolio-one img{display:block; width:100%; height:auto; }

/* iPad Fix */
@media only screen 
and (min-device-width:768px) 
and (max-device-width:1024px){
.portfolio-three{width:32.60%}
.portfolio-two{width:49.3%}
.portfolio-one{width:99%}
}

/*-----------------------------------------------------------------------------------*/
/*	Column Styles
/*-----------------------------------------------------------------------------------*/

.webbu-one-half { width: 48%; display:inline-block; margin-right:3%; }
.webbu-one-third { width: 31.5%;display:inline-block; margin-right:1%; }
.lastbox{margin-right:0px;}
.webbu-one-half:last-child { margin-right:0%; }
.webbu-one-third:last-child { margin-right:0%; }


/* Clearfix */
.webbu-clearfix:before,
.webbu-clearfix:after { content:""; display:table; }
.webbu-clearfix:after { clear: both; }
.webbu-clearfix { zoom:1; /* For IE 6/7 (trigger hasLayout) */ }

/*--------------------------------------------------
DIVIDER  & TITLES
Divider: http://www.okilla.com/289/resource-pixel-dividers/
---------------------------------------------------*/
/* For Page */
.line-title-left {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  text-align: left;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-attachment: scroll;
  background-repeat: repeat-x;
  background-position: left center;
}
.line-title-left span {
  padding-right: 10px;
}
.line-title-middle {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-attachment: scroll;
  background-repeat: repeat-x;
  background-position: left center;
}
.line-title-middle span {
  padding-right: 10px;
  padding-left: 10px;
  background-color: #ffffff;
}
.line-title-right {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  text-align: right;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-attachment: scroll;
  background-repeat: repeat-x;
  background-position: left center;
}
.line-title-right span {
  padding-left: 10px;
  background-color: #ffffff;
}

.dividert{
	background-repeat: repeat-x;
	width: 100%;
	height: 2px;
	margin-top:-5px;
	margin-bottom:15px;
}

/*--------------------------------------------------
CONTACT PAGE
---------------------------------------------------*/
.contactarea{margin:0px;}
.subcontainer{width:100%; margin-right:auto; margin-left:auto;padding-bottom:10px;}
.map-container{margin-bottom:10px;}
	/*--------------------------------------------------
	CONTACT INFORMATIONS & CONTAINER
	---------------------------------------------------*/
	.contact-header{padding-top:10px; padding-left:5px;padding-bottom:10px;background-color:#ccc; line-height:12px; color:#333; display:block; font-size:14px; font-weight:bold; margin-top:10px; margin-right:auto; margin-bottom:0px; margin-left:auto}

	.contact-sub{float:left; width:100%; padding-top:10px; padding-bottom:10px; padding-left: 5px;}
	.contact-sub .csubtitle{width:30%; color:#333; float:left; font-size:14px; font-weight:500;}
	.contact-sub .csubinfo{width:70%; float:left; color:#333; display:block; font-weight:400;}
/*--------------------------------------------------
	CONTACT FORM ELEMENTS
	---------------------------------------------------*/
	#contact_form{  padding-top:10px; padding-bottom:10px}
	.input-area, 
	.textarea{width:96%;  padding-top:10px; padding-bottom:10px; color:#600; background-color:#FFF; font:11px Arial; -webkit-box-shadow:inset 0 0 2px #141212,1px 1px #CCC; -moz-box-shadow:inset 0 0 2px #141212,1px 1px #CCC; -ms-box-shadow:inset 0 0 2px #141212,1px 1px #CCC; -o-box-shadow:inset 0 0 2px #141212,1px 1px #CCC; box-shadow:inset 0 0 2px #141212,1px 1px #CCC;}
	.textarea{height:100px; resize:none; margin-bottom:10px}
	.formsub{width:100%; color:#333;margin-left:-5px; font-size:12px;}
	#loader{display:block;}
	.cmessage{ font-weight:bold;}
    .subconcainer button{margin-left:-5px; padding-bottom:10px}
    .subcontainer label{padding-left: 5px;}
	

/*--------------------------------------------------
Loading Spinner
---------------------------------------------------*/
.spinnerbg{
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: .8;
	position: absolute;
	z-index: 5;
	top: 0px;
	left: 1px;
}
#spinner.active {
    display: block;
}
#spinner {
	position: absolute;
	height: 60px;
	width: 60px;
	top: 60%;
	left: 38%;
	z-index: 7;
}
.ball { 
    position: absolute;
    display: block;
    background-color: #ffffff;
    left: 24px;
    width: 12px;
    height: 12px;
    border-radius: 6px;
}
#first {
    -webkit-animation-timing-function: cubic-bezier(0.5, 0.3, 0.9, 0.9);
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 6px 30px;
    -moz-animation-timing-function: cubic-bezier(0.5, 0.3, 0.9, 0.9);
    -moz-animation-name: rotate; 
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 6px 30px;

}
#second {
    -webkit-animation-timing-function: cubic-bezier(0.5, 0.5, 0.9, 0.9);
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 6px 30px;
	  -moz-animation-timing-function: cubic-bezier(0.5, 0.5, 0.9, 0.9);
    -moz-animation-name: rotate; 
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 6px 30px;
}
#third {
    -webkit-animation-timing-function: cubic-bezier(0.5, 0.7, 0.9, 0.9);
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-transform-origin: 6px 30px;
	  -moz-animation-timing-function: cubic-bezier(0.5, 0.7, 0.9, 0.9);
    -moz-animation-name: rotate; 
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: infinite;
    -moz-transform-origin: 6px 30px;
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
  }
  100% { 
    -webkit-transform: rotate(1440deg) scale(1); 
  }
}​

@-moz-keyframes rotate {
  0% {
    -moz-transform: rotate(0deg) scale(1);
  }
  100% { 
    -moz-transform: rotate(1440deg) scale(1); 
  }
}

/*--------------------------------------------------
Youtube Pages Adjusted Size
---------------------------------------------------*/
.VimeoPlayer{
	width: 70%; /* Changed for YouTube (from 98%) */
    height: auto;
	display:block;
}

@media (min-width: 560px) {  /* Changed for YouTube (from 1024) */
	.VimeoPlayer{
	width: 70%
	%;  /* Changed for YouTube (from 98%) */
    height: 395px; /* Changed for YouTube (from 400px) */
	display:block;
	}
	}
.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}