/*   
Theme Name: Modern Metro
Theme URI: http://impactweb.pl
Description: Premium Metro Modern UI stylized Wordpress Theme
Author: Kluska
Author URI: http://http://themeforest.net/user/kluska
License: GNU General Public License
License URI: http://themeforest.net/wiki/support/legal-terms/licensing-terms/
Tags: flexible-width, custom-background, custom-menu, featured-images, full-width-template, post-formats, theme-options, translation-ready

Version: 1.203
*/


@import url('css/reset.css');
@import url('css/jquery.mCustomScrollbar.css');



/*	INDEX OF CONTENT
	1. Main body settings and style templates
		1.1 Layout settings
		1.2 Single pages settings
		1.3 Homepage elements
	2. Static elements on each page (navbar, header, control buttons)
		2.1. SIDEBARS (NAVBAR, SHARE)
		2.2. HEADER
		2.3. FULLSCREEN, Preloaders, holders
		2.4. BOTTOM CONTROLS
		2.5. Author-box, copyright info
	3. Tiles
	4. Shortcodes
	5. @Fontface, font settings
	6. Misc
		6.1 Chrome and IE scrollbar
		6.2 Comments
		6.3 Calendar
		6.4 CSS 3 Animations
	7. Media Queries, mobile, disabled JS css
*/

/*
-------------------------------------------------------------
1. Main body settings and style templates
-------------------------------------------------------------
*/


body { 
  background-color:#1a1a1a;
  color:#fff;
  font-family: 'weblysleek', Arial, sans-serif; 
  font-weight: lighter;
  margin: 120px 30px 0px 120px;
  background-attachment: fixed;
  background-position: 0% 50%;
  word-wrap: break-word;
  overflow-x: auto;
  overflow-y: hidden; 
}
body.mm-orientation-vertical{
	overflow-y: visible;   
}
h3,h4,h5 {
	letter-spacing: -0.06em;
}

h1,h2,h3,h4{font-weight: lighter;}
h1{
	font-size:42pt; line-height:48pt !important;
}
h2{
	font-size:20pt; line-height:24pt !important;
}
h3{	
	font-size:15pt;line-height:18pt !important;
}
h4{
	font-size:11pt;line-height:14pt !important;
}
h5{	
	font-size:9pt;line-height:11pt !important;
}

a {color: #fff;text-decoration:none;}
a:hover {color: #fff;}
a:link {-webkit-tap-highlight-color: #008287;} 

::-moz-selection{background: #008287; color: #fff; text-shadow: none;}
::selection {background: #008287; color: #fff; text-shadow: none;} 
.searchimage{background-color:#cccccc;}

/*-------------------------------------------------------------*/
i{font-style: normal;}
/*-------------------------------------------------------------*/

/*-------------------------------------------------------------*/
.blackbg{background-color:#000;}
.inline{display:inline-block;}
/*-------------------------------------------------------------*/
.fleft{float:left;}
.fright{float:right;}
.fnone{float:none;}
.cboth{clear:both;}
/*-------------------------------------------------------------*/
.xsmallline{margin-bottom:5px;}
.smallline{margin-bottom:10px;}
.mediumline{margin-bottom:20px;}
.bigline{margin-bottom:40px;}
/*-------------------------------------------------------------*/
.xsmalllinetop{margin-top:5px;}
.smalllinetop{margin-top:10px;}
.mediumlinetop{margin-top:20px;}
.biglinetop{margin-top:40px;}
/*-------------------------------------------------------------*/
.xsmallgroup{margin-right:5px;}
.smallgroup{margin-right:10px;}
.mediumgroup{margin-right:20px;}
.biggroup{margin-right:40px;}
.xbiggroup{margin-right:80px;}
.mediumgroup-left {margin-left: 20px;}
/*-------------------------------------------------------------*/
.ovfvisible{overflow:visible !important;}
.ovfhidden{overflow:hidden !important;}
/*-------------------------------------------------------------*/
.nobg{background:transparent !important;}
.noborder{border-color:transparent !important;}
/*-------------------------------------------------------------*/
.prelative{position:relative;}
.pabsolute{position:absolute;}
/*-------------------------------------------------------------*/

.vbottom {width:100%;box-sizing: border-box;position:absolute;bottom:0px;}
.vcenter {vertical-align:middle;}
/*-------------------------------------------------------------*/
.smallpadding{padding:10px;}
.bigpadding{padding:20px;}
/*-------------------------------------------------------------*/
.smallvmarg{margin:10px 0 10px 0;}
.bigvmarg{margin:20px 0 20px 0;}
/*-------------------------------------------------------------*/
.center{text-align:center;}
.bgcenter{background-position:center;}
.bgnorpt{background-repeat:no-repeat;}
/*-------------------------------------------------------------*/
.mrgnaut{margin-left:auto;margin-right:auto;}
/*-------------------------------------------------------------*/
.half-width{width:50%;}
.third-width{width:33%;}
.fourth-width{width:25%;}


/*-------------------------------------------------------------*/
.secondary{opacity:0.8;}
.tertiary{opacity:0.4;}
/*-------------------------------------------------------------*/
.black-to-transparent {
	background: url(images/black-to-transparent.png) repeat-x bottom;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	z-index:30;
	
}
/*-------------------------------------------------------------*/
.stretchbg {	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
/*-------------------------------------------------------------*/

.fullscreenbg{position:fixed;z-index:49;left:0;right:0;height:100%;bottom:0;top:0;background:black;padding:0px;text-align:center;}
.fullscreenbg.hidden{display:none;}

.mmlightboxcontainer #mmImagePreloader{height:64px;width:64px;margin:auto;z-index:9999;position:absolute;left:50%;top:40%;}
.mmlightboxcontainer table{top:0;bottom:0;width:90%;height:100%;margin:auto;}
.mmlightboxcontainer td{vertical-align:middle;}
.mmlightboxcontainer .lightboxSingle{max-width:70%;max-height:70%;display:inline-block;}
#gallery-lightbox-image{width:100%;}
.gallery-lightbox-navigation{width:48px;}
.selected-text{display:inline;}

img.big{width:128px;}
img.medium{width:64px;}
img.small{width:32px;}
img.vsmall{width:16px;}

img.wp-post-image{margin-bottom:10px;}
img.big.nopadding{width:128px;margin:-30px;}
img.medium.nopadding{width:64px;margin:-15px;}
img.small.nopadding{width:32px;margin:-7px;}
img.vsmall.nopadding{width:16px;margin:-3px;}

/*-------------------------------------------------------------*/
blockquote, q {margin:10px 0 10px 0;quotes: none; padding:0px 0 20px 40px;font-weight:normal;font-size:11pt;background:url(images/blockquoute_white.png) no-repeat 0 5px;}
blockquote:before,blockquote:after,q:before,q:after {content: ''; content: none;}
/*-------------------------------------------------------------*/
ins {background-color: #008287; color: #fff; text-decoration: none;}
mark {background-color: #008287; color: #fff; font-style: normal; font-weight: lighter;}
input,textarea{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	outline: none; 
}
strong,b{
	font-style: normal; font-family: 'weblysleek_semibold',Arial;font-weight:lighter;
}
a.tileanchor {display:block;}

.nowrap{
	white-space:nowrap;
}
.warp, .wrap{
	white-space:normal !important;
}

.borderbox{
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */
}
.flatSelect{
	background:#1A1A1A;
	font-weight:normal;
	color:#fff;
	outline:none;
	padding:2px;
	border:2px solid #ccc;
	font-size:15pt;
	-webkit-appearance:none;	
	cursor:pointer;
}	
.button{
	border:2px solid gray;
	padding:5px 10px 5px 10px;
	cursor:pointer;
}
.pointer{
	cursor:pointer;
}
.hoverBorder:hover{
	border:2px solid;
	margin:-2px;
}
.hoverBorder.smallgroup:hover{
	border:2px solid;
	margin:-2px;margin-right:8px;
}

.hoverBorderBox:hover{
	border:2px solid;
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */
}

.verticalScroll {
  height: 650px;
  width: 100%;
  overflow: hidden;
}
.smallpadding{padding:10px;}
.mediumpadding{padding:20px;}
.bigpadding{padding:40px;}

.aligntop{vertical-align:top !important;}
.alignright{text-align:right;}
.alignleft{text-align:left;}



/***************************************************************
/***************************************************************
/**************************************************************/






/*
-------------------------------------------------------------
1.1 LAYOUT
-------------------------------------------------------------
*/






#columnWrapper {
  position: relative;
  display: none;
  overflow: hidden;
  background: #131312;
}

#contentholder {
	/*background:red; /*dev*/
}

.column > * {
  margin-right: 80px;
}

.column {
  margin-bottom: 80px;
}

.singleColumn {
  margin-right: 80px;
  padding: 2px;
  clear:both;
/*to make hover border visible*/
}

body.mm-orientation-auto .columnContent {
  width: 470px;
/*allow browser to estamine proper height of each element before columnizing*/
}
body.mm-orientation-vertical .columnContent {
	width: auto;
}

#gallerry .singleColumn, #blog .singleColumn,#portfolio .singleColumn {
  padding-right: 80px;
}
#portfolio .singleColumn {
	max-height:290px;
}

#indexContent {
  margin: -5px 0 0 -5px;
  height: 100%;
}

#indexContent > * {
  display: inline-block;
}

#gropus-container > div.single-group {
  vertical-align: top;
  display: inline-block;
  white-space: normal;
}

#gropus-container {
  white-space: nowrap !important;
}




/***************************************************************
/***************************************************************
/**************************************************************/





/*
-------------------------------------------------------------
1.2 SINGLE PAGE/POST
-------------------------------------------------------------
*/






.entry-content ul ,.entry ul{
  list-style-type: disc;
  margin: 10px 0 20px 20px;
}
.inside li {
	list-style-type: disc;
	margin-left: 20px;
	
}

.entry-content ul li ,.entry ul li {
  padding-left: 10px;
  margin: 5px 0 5px 0
}

.searchimage, .smallsquare {
  width: 40px;
  height: 40px;
}
.mediumsquare {
  width: 80px;
  height: 80px;
}
.bigsquare {
  width: 100px;
  height: 100px;
}
.author-avatar{
	width:50px;
	height:50px;
}

.entry-content .post-tags {
	margin-top:20px;
}
.entry-content .single-tag {
	display:inline-block; margin-right:10px;padding:3px 7px 3px 7px;
}

.entry-featured-box {
	width:470px;
	height:240px;
	overflow:hidden;
	position:relative;
}
.portfolio-featured-box {
	width:720px;
	height:385px;
	overflow:hidden;
	position:relative;
}
.portfolio-featured-box.full {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 30%;
	z-index:20;
}


.previous-posts .previous-post-single {padding-left:2px;}
.previous-posts  .previous-post-single:hover .mediumsquare{
	border:2px solid #555;
	margin: -2px 8px 18px -2px;
}

svg text{
	opacity:0.6;
	filter:alpha(opacity=60);
}

/***************************************************************
/***************************************************************
/**************************************************************/





/*
-------------------------------------------------------------
1.3 HOMEPAGE ELEMENTS
-------------------------------------------------------------
*/
#js-disabled{display:none;}
body.js-disabled #js-disabled{	
	display:block;
	position:fixed;left:0;bottom:0;
	height:20px;width:100%;	
	background:#333;	
	padding:10px;
	z-index:999;
	text-align:center;
}

ul#tilesMenu li{
	
	line-height:2.7em;
	
	cursor:pointer;
}

#last-post-fullscreen{
	position:absolute;
	top:0;left:0;bottom:0;
	background:black;
	z-index:40;
	overflow:hidden;
}
#last-post-fullscreen img{
	min-height:100%;
	min-width:100%;
	height:auto;
	width:auto;
	position:absolute;
}
#last-post-fullscreen hr{
	height:5px;
	background:white;
	border:0;
	margin-right:80%;
}
#last-post-fullscreen .bottom-label{
	position:absolute;
	left:120px;
	bottom:100px;
	right:100px;
	z-index:1;
	
}

.welcome-column .verticalScroll .mCustomScrollBox{
	/*margin-top:5px;*/
}
.welcome-column .verticalScroll, .welcome-column > h2{
	margin-left:5px;
}


/***************************************************************
/***************************************************************
/**************************************************************/










/*
-------------------------------------------------------------
2. Static elements on each page (navbar, header, control buttons)
-------------------------------------------------------------
*/




/*
-------------------------------------------------------------
2.1 NAVBAR
-------------------------------------------------------------
*/
 
 
 
 
#navbar{position:fixed;z-index:51; height:100%; width:270px; padding:58px 40px 40px 40px;top:0;left:-330px;background-color:#070500;}
body.admin-bar #navbar{padding-top:82px;}
#navbarHeader{margin-bottom:20px;}
#navbardots{position:absolute;right:9px;top:45%;height:25px;width:5px;background-image:url(images/navbardots.png);opacity:0.6;}
.navbar-opened #navbardots {opacity: 0;}
body.admin-bar #navbardots{top:45%;}
#dropdownNav{display:none;}

nav{
	font-size:11pt;margin-top:20px;
}
nav ul {
	margin-bottom:20px;
}
nav ul li{
	margin-top:20px;overflow:visible;
}
nav li > ul {display:none;}
nav ul li ul li{
	margin-top:20px;margin-left:20px;
}
nav hr{
	height:0;
	border:1px solid #333;
	margin-top:20px;
}
nav ul li:hover .smallsquare{ 
	border-right:3px solid #333;
	margin-right:7px;
}

#navbar select{height:32px;width:100%;border:0;outline: none;font-size:11pt;padding-left:5px;background-color:#d2d2d2;}


nav table{height:32px !important;}
nav table td{overflow:hidden;}
td#searchButton{width:32px !important;}
#searchsubmit{z-index:100;background-color:#d2d2d2 !important;}
#s{height:100%;}
#sForm{width:100%;}
#searchForm input{background-color:#d2d2d2;color:#272727;border:0px;height:32px;color:#272727; -webkit-appearance: none;padding:0;margin:0;font-size:11pt;}
#searchForm input[type=search]{padding-left:10px;float:left;width:100%;}
#searchForm input[type=submit]{width:32px;padding:0 !important;float:right;background:url(images/forms/search-button-rest.png) #d2d2d2 no-repeat center;}
#searchForm input[type=submit]:hover{background-image:url(images/forms/search-button-hover.png)}
#searchForm input[type=submit]:active{background-image:url(images/forms/search-button-active.png)}
.clearFormButton{
	width:28px;height:28px;padding:0;margin:2px 0 2px 0;
	z-index:1000;
	background-image:url(images/forms/clear-form-rest.png);
    display:none;
}
.clearFormButton:hover{background-image:url(images/forms/clear-form-hover.png);}
.clearFormButton:active{background-image:url(images/forms/clear-form-active.png);}
#tabletTapper{position:fixed;z-index:9999;height:100%;width:50px;top:0;left:3px;}










.shareFooter {
  display:none;
  position: fixed;
  top: 0px;
  right: -320px;
  width: 230px;
  height: 100%;
  background: #000;
  z-index: 99;
  padding: 56px 40px 40px 40px;
}

.sharebackbutton {
  position: relative;
  top: 2px;
}
body.admin-bar .shareFooter {
	padding-top:80px;
}	

/***************************************************************
/***************************************************************
/**************************************************************/




/* 
-------------------------------------------------------------
2.2. HEADER
-------------------------------------------------------------
*/




header {
  position: fixed;
  top: 30px;  
  left:120px;
  z-index: 50;
}
body.admin-bar header {
	top: 54px;
}


#backbutton {
  margin-top:7px;
  display:inline-block;  
  margin-left:-75px;margin-right:20px;
  position:relative;
  background: no-repeat center;
  width: 48px;
  height: 42px;
}

#backbutton.white {
  background-image: url(images/backbutton_white.png)
}

#backbutton.black {
  background-image: url(images/backbutton_black.png)
}

/***************************************************************
/***************************************************************
/**************************************************************/




/* 
-------------------------------------------------------------
2.3. FULLSCREEN
-------------------------------------------------------------
*/





#fullscreenPreloader {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000;
  z-index: 999;
  text-align: center;
  display: none;
}

#fullscreenPreloader h2 {
  margin: auto;
  width: auto;
  margin-top: 20px;
  color: white;
}

#fullscreenPreloader p.tertiary {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  color: white;
}



#mm_dialog {
  background-color:#fff;
  position: absolute;
  left: 0;
  top: 45%;
  width: 100%;
  color: #000;
  padding: 40px 40px 40px 0;
  vertical-align: middle;
}

#mm_dialog  .button {
  background-color:#ababab !important;
  float: right;
  display: inline;
  cursor: pointer;
  margin-bottom: -3px;
  border: 2px solid gray;
  padding: 8px 15px 8px 15px;
}

#mm_dialog  .button:hover {
  background-color:#9a9a9a !important;
}

#mm_dialog  .button:active, #mm_dialog > .button:active > * {
  color:white !important;background-color:black !important;
  position: relative;
}

#mm_dialog table {
  margin: auto;
  width: 50%;
  min-height: 32px;
}

#mm_dialog table td {
  vertical-align: middle;
}

.preloadercircle {background-image:url(images/preloader-white.gif);}
.preloaderbubble {
	margin-top:500px;width:48px;height:48px;position:relative;margin: auto;
	background-position:center;
	background-repeat:no-repeat;
	background-image:url(images/preloader-white.gif);
}
.preloaderbubble.black {
	background-image:url(images/preloader-black.gif);
}
.preloaderbubble.white {
	background-image:url(images/preloader-white.gif);
}

.mm_dialog_notification {
	width:310px;
	max-width:80%; /*for mobile */
	height:80px;
	position:fixed;
	top:100px;
	right:85px;
	padding-top:20px;
	padding-left:20px;
	display:none;
	border: 2px solid #555;
	background-position:96% 90%;
	background-repeat: no-repeat;
	cursor:pointer;
	z-index:100;
}
.mm_dialog_notification:hover{
	border-color:#777;
}


.bubble{
	height:32px;
	width:32px;
	background-repeat:no-repeat;
	background-position:center;
}
.bubble.black{
	background-image:url(images/preloader-black.gif);	
}
.bubble.white{
	background-image:url(images/preloader-white.gif);
}
.fs {
	position:fixed;
	display:none;
	top:0;bottom:0;right:0;left:0;
	z-index:999;
}
.fs.black{
	background: black;
	background: rgba(0, 0, 0, 0.92);
}
.fs .bubble{
	position:absolute;
	top:50%;
	left:50%;
}
.fs.transparentfullscreen {
  z-index: -9999;
  background: transparent !important;
  display:block;
}
/***************************************************************
/***************************************************************
/**************************************************************/



/* 
-------------------------------------------------------------
2.4. BOTTOM
-------------------------------------------------------------
*/
.sorttilesbutton{
	display:none;
}

.controlFooter {
  position: fixed;
  bottom: 10px;
  right: 65px;
  z-index:21;
 }



/***************************************************************
/***************************************************************
/**************************************************************/

/* 
-------------------------------------------------------------
2.5. Author-box
-------------------------------------------------------------
*/
.author-box{
	position:fixed;
	top:41px;
	right:90px;	
}
body.admin-bar .author-box{
	top:65px;
}
.author-box td {vertical-align:top;padding-left:10px;text-align:right;}

.author-box:hover .author-avatar{
	border:2px solid #444;
	margin:-2px;
}

.copyright-info {
	position:fixed;
	bottom:30px;
}
/***************************************************************
/***************************************************************
/**************************************************************/






/*
-------------------------------------------------------------
3. TILES
-------------------------------------------------------------
*/







.tile{
	overflow:hidden;
	background-position:50% 50%;
	background-repeat: no-repeat;	
	margin:5px;
	
	position:relative;
	padding:0;		
}
.tile:hover{
	border:2px solid;margin:3px;
	cursor:pointer;
}
.tile:active{
	border:2px solid;margin:3px;
	cursor:pointer;
}
/*-------------------------------------------------------------*/
.tile.normal{
	width:150px;	
	height:150px;	
}
.tile.wide{
	width:310px;
	height:150px;
}
.tile.xwide{
	width:470px;
	height:150px;
}

.tile.big{
	width:310px;
	height:310px;
}
.tile.high{
	height:470px;
	width:310px;
}
.tile.blogtile{
	width:310px;
	
	
	
}
.tile.blogtile.big{
	width:310px;
	height:310px;
}
.tile.blogtile.normal{
	width:150px;
	height:150px;
}

.tile.gallerrytile{	
	height:200px;
	min-width:60px;
	
}

.tile.panoramic{	
	height:70px;
	width:310px;	
}

.tile.bigwide{
	width: 630px;
	height: 310px;
}


/*-------------------------------------------------------------*/
/*-------------------------------------------------------------*/
.tile .bottom-label{
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;	
	z-index:30;
	padding:10px 10px 10px 15px;
	background-position:left;background-repeat:no-repeat;
}

.tile.big .bottom-label,.tile.high .bottom-label{padding-top:20px;font-size:15pt;}
.tile.bigwide .bottom-label {
	width:50%;
}

.tile .bottom-label h2{
	margin-top:-5px;
}
.tile .bottom-label.icon{
	padding-left:32px !important;
}
.tile.normal .bottom-label h4{
	margin-right:8px;
}

.tile.big .bottom-label h4.tile-title, .tile.high .bottom-label h4.tile-title{
	font-size:21pt;	
}

.blogtile-featured-slider{height:120px;}

.tile .down-right{
	position:absolute;
	bottom:10px;
	right:10px;	
}
.tile .down-left{
	position:absolute;
	bottom:10px;
	left:20px;	
}
.tile .top-right{
	position:absolute;
	top:10px;
	right:0px;	
}
.tile .top-left{
	position:absolute;
	top:10px;
	left:10px;	
}

.tile .date h1{
	margin-bottom:-10px;letter-spacing:-6px;
}
.tile.big .date h1{
	font-size:98pt;
	line-height:1em !important;
}
.tile.big .date h4{
	font-size:21pt;
	line-height:1em !important;
}
.tile .inside{
	padding:20px;
}

.tile.panoramic .featured{
	height:70px;
	width:70px;
}
.tile.panoramic:hover .featured{
	border-right:2px solid #555;
	margin-right:8px;
}
.tile.panoramic:active .featured{
	border-color:#777;	
}

.tile.big.post-tile .inside {
	padding-top:20px;
	padding-left:20px;
}

.tile.wide.post-tile h2.mediumline{ /*remove big header-meta spacing in small wide tile*/
	margin-bottom:0;
}

/*-------------------------------------------------------------*/
.slide{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	z-index:20;
	background-position:center;
	background-size: cover;
}
.slide.last{
	z-index:21;
}
.slide.current{
	z-index:22;
}
.slideInside{
	height:100%;
	padding:10px;margin-right:10px;overflow:hidden;
}
.tile .slide .bottom-label{
	width:80%;
}
.tile.wide.metroSlide .bottom-label p,.tile.normal.metroSlide .bottom-label p{
	padding-top:5px;display:inline-block;width:65%;
}
.metroSlide {
    
}
/*-------------------------------------------------------------*/
.tile table{
	margin-left: auto;
    margin-right: auto;	
	height:100%;
	padding-bottom:10px;
	table-layout:auto;
}
.tile table td.center-icon{
	width:68px; /* 128px-60px=68px  (60px = 30px * 2 (icons padding) */	
	margin-right:20px;
}
.tile table td.center-title{
	/*padding-left:20px; /* 128px-60px=68px  (60px = 30px * 2 (icons padding) */	
}
.tile table td{
	background-position:50%;
	background-repeat:no-repeat;
	height:58px;
	vertical-align:middle;
	
}
.tile table.thirds{padding-bottom:0;}

.tile table.thirds td{
	width:170px;
}


/*COLOR SETTINGS */
.tile{color:#fff;}
.tile:hover{border-color:#555;}
.tile:active{border-color:#777;}



/***************************************************************
/***************************************************************
/**************************************************************/




/*
-------------------------------------------------------------
4. SHORTCODES
-------------------------------------------------------------
*/






/*.dontsplit,.split{overflow:auto;} /* http://www.ejeliot.com/blog/59 - needed to set correct height if content has floating items 
ul.dontsplit,h1{overflow:visible;}*/
.shortcode{
	overflow-x:hidden; /*fixes columnizer overlay on float bug */
	position:relative;
}
.shortcode.video{
	overflow:hidden;
}
.shortcode.borderbox{
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */	
}
/*-------------------------------------------------------------*/
.shortcode.accordion{
	width:100%;	
}
.shortcode.accordion .tabContent{
	border:1px dotted;
}
.shortcode.accordion .content{
	display:none;
}
.shortcode.accordion .title{
	cursor:pointer;
}

/*-------------------------------------------------------------*/
.shortcode.tabs ul li{
	display:inline;cursor:pointer;padding:10px 20px 10px 0px;
}
.shortcode.tabs {
	background-color:black;
}
.shortcode.tabs ul li.active{
	font-family:'weblysleek_semibold',Arial;
}
.shortcode.tabs ul{
	display:inline;margin:0;padding:0;
}
.shortcode.tabs .tab{
	display:none;
}
.shortcode.tabs .tabsnav{
	margin:20px 20px 0px 20px;overflow:visible;
}
.shortcode.tabs .tabswrap{
	
}
/*-------------------------------------------------------------*/
.shortcode.accordionTabs{
	
}
.shortcode.accordionTabs .tabTitle{
	padding:10px;margin:1px 0 1px 0;cursor:pointer;
}
.shortcode.accordionTabs .tabTitle img{
	margin-right:3px !important;
}
.shortcode.accordionTabs .tabContent{
	padding:10px 10px 10px 20px;margin:5px 0 5px 0;
	border:1px dotted;
}
/*-------------------------------------------------------------*/
.onehalf{
	width:50%;
}
.onethird{
	width:33%;
	
}
.twothird{
	width:66%;
}
.onehalf,.onethird,.twothird{
	display:inline-block;vertical-align:top;
}
/*-------------------------------------------------------------*/
.onehalf.last,.onethird.last,.twothird.last{
	padding:0 0 0 10px;
}
.onehalf.first,.onethird.first,.twothird.first{
	padding:0 10px 0 0; clear:left;
}
.onehalf,.onethird,.twothird{
	padding:0 10px 0 10px;
}
.onehalf.first.last,.onethird.first.last,.twothird.first.last{
	padding:0 10px 0 0;clear:right;
}

/*-------------------------------------------------------------*/
.shortcode.contact-form input,.shortcode.contact-form textarea{
	border:0px;
	padding-left:10px;padding-top:5px;
	margin:0 0 10px 0;
	font-family:'weblysleek', Arial, sans-serif;
	font-size:11pt;	
}
.shortcode.contact-form textarea{
	box-sizing: border-box;
	width:100%;
	resize: none;	
	margin-right:20px;
	min-height:150px;max-height:200px;
}
.shortcode.contact-form input[type=text]{
	height:32px;
	width:49%;
}
.shortcode.contact-form input[type=submit]{
	border:2px solid;
	padding:5px 20px 5px 20px;	
	display:inline-block;
	
	color:white;
	float:right;
	width:auto;
}
.shortcode.contact-form input[type=submit]:hover{	
	
}
.shortcode.contact-form input[type=submit]:active, .shortcode.button:active > *{
	color:black !important;
	background:white !important;
}

/*-------------------------------------------------------------*/
.shortcode.video{width:100% !important;}
/*-------------------------------------------------------------*/
div.shortcode table{width:100%;}
div.shortcode table td,div.shortcode table th{padding:10px;}
div.shortcode.insideBorder table {
    border-collapse: collapse;
}
div.shortcode.insideBorder table td, table.insideBorder th {
    border: 2px solid;
}
div.shortcode.insideBorder table tr:first-child th {
    border-top: 0;
}
div.shortcode.insideBorder table tr:last-child td {
    border-bottom: 0;
}
div.shortcode.insideBorder table tr td:first-child,
div.shortcode.insideBorder table tr th:first-child {
    border-left: 0;
}
div.shortcode.insideBorder table tr td:last-child,
div.shortcode.insideBorder table tr th:last-child {
    border-right: 0;
}
/*-------------------------------------------------------------*/
div.shortcode.bordered table {
    border: 2px solid;margin-bottom:20px;
}
div.shortcode table{
	 /width:100%;
}
div.shortcode th{
	 text-align:left;
}
/*-------------------------------------------------------------*/
div.shortcode .inside{
	display:block;
	margin:20px;	
}
div.shortcode .smallinside{
	display:block;
	margin:10px;	
}
div.shortcode.frame{
	width:100%;
	border:2px solid;
}
.flickr_badge_wrapper{
	clear:right;margin:2px;
}
.qr{
	float:left;margin:0 10px 10px 0;
	border:2px solid white;
}
.flickr_badge_wrapper img{
	float:left;width:18%;height:auto;margin-right:2%;margin-bottom:2%;
}
.googlemap{
	clear:both;overflow:hidden;
}
/*-------------------------------------------------------------*/
.shortcode.list{
	margin-bottom:10px;vertical-align:top;
	padding:0;
}
.shortcode.list table.list{height:100%;}
.shortcode.list table.list td{
	height:100%;
	vertical-align:bottom;
}
.shortcode.list .avatar{
	width:48px;height:48px;background:gray;vertical-align:top;
}
.shortcode.list.avatarlist table,.shortcode.list.avatarlist table td{
	width:auto;height:100%;vertical-align:bottom;padding:0;margin-top:5px;
}
.shortcode.list.avatarlist .button:hover{
	background-color:black;
}
.shortcode.progressbar{
	height:8px;
}
.shortcode.progressbar .bar{
	height:8px; width:0;
}
/*-------------------------------------------------------------*/
.metroSlide {
	position:relative;overflow:hidden;
}
.shortcode.metroSlide{
	width:100%;
}
.shortcode.metroSlide .slide{
	background-repeat:no-repeat;
}
.testimonial{
	padding-bottom:10px;
}
.mm-rating {
	margin-bottom:-10px;
	margin-top:-5px;	
}
.mm-rating img{
	margin-left:-5px;
	margin-right:-5px;


}


/*COLOR SETTINGS */
.shortcode.progressbar{border-color:#fff;}
.shortcode.progressbar:hover{border-color:#fff;background-color:#181819;}
.shortcode.progressbar .bar{	background-color:#fff;}
.shortcode.frame{	border-color:#070500;}
.shortcode.button{	border-color:#fff;	background-color:#3a3a3a;}
.shortcode.button:hover{background-color:#008287;}
.shortcode.button:active, .shortcode.button:active > *{color:black !important;background-color:white !important;}
.shortcode.tabs ul li.active{	border-bottom-color:#008287;}
.shortcode.tabs .tabswrap{background-color:#070500;}
.shortcode.accordionTabs .tabTitle{background-color:#070500;}
.shortcode.accordionTabs .tabContent,.shortcode.accordion .tabContent{border-color:#070500;}
.shortcode.hoverborder:hover{border-color:#555;}
.shortcode.contact-form input,.shortcode.contact-form textarea{background-color:#d2d2d2;color:black;}
.shortcode.contact-form input[type=submit]{border-color:#fff;background-color:#3a3a3a;color:white;}
.shortcode.contact-form input[type=submit]:hover{background-color:#008287;}
.shortcode.contact-form input[type=submit]:active, .shortcode.button:active > *{color:black !important;background-color:white !important;}
div.shortcode.bordered table,div.shortcode.bordered table td {border-color:#282828;}
div.shortcode.hoverRow table th:hover{background-color:#262626;}
div.shortcode.hoverRow table tr:hover{background-color:#262626;}
div.shortcode.hoverRow table th:active{background-color:#282828;}
div.shortcode.hoverRow table tr:active{background-color:#282828;}


/***************************************************************
/***************************************************************
/**************************************************************/



/* 
-------------------------------------------------------------
5. @FONTFACE, FONT SETTINGS
-------------------------------------------------------------
*/


@font-face {
    font-family: 'weblysleek';
    src: url('font/weblysleek/weblysleekuil-webfont.eot');
    src: url('font/weblysleek/weblysleekuil-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/weblysleek/weblysleekuil-webfont.woff') format('woff'),
         url('font/weblysleek/weblysleekuil-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'weblysleek_italic';
    src: url('font/weblysleek/weblysleekuili-webfont.eot');
    src: url('font/weblysleek/weblysleekuili-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/weblysleek/weblysleekuili-webfont.woff') format('woff'),
         url('font/weblysleek/weblysleekuili-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'weblysleek_semibold';
    src: url('font/weblysleek/weblysleekuisb-webfont.eot');
    src: url('font/weblysleek/weblysleekuisb-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/weblysleek/weblysleekuisb-webfont.woff') format('woff'),
         url('font/weblysleek/weblysleekuisb-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}






body,h2,h3,h4,h5,h6,p,i,strong,.bold,input,li.active,textarea{
	font-family: 'weblysleek',Arial;
}
blockquote,blockquote * {
	font-family: 'weblysleek_italic', Arial;
	letter-spacing: 0.5px;
}
h1,ul#tilesMenu li {
	font-family: 'weblysleek',Arial;
}
.bold,li.active,b,strong {
	font-family: 'weblysleek_semibold',Arial; 
}
.semi-heavy {
	font-family: 'weblysleek_semibold';
}
.heavy {
	font-family: 'weblysleek_semibold',Arial;
}

.xheavy {
	font-family: 'weblysleek_semibold',Arial;
}

.entry-content,.entry , .welcome-column .verticalScroll{
  line-height: 1.6em;
}
.bottom-label, .bottom-label *{
	line-height:1.2em;
}


/*DROID-SERIF************************************************/

@font-face {
    font-family: 'DroidSerifRegular';
    src: url('font/droid-serif/DroidSerif-Regular-webfont.eot');
    src: url('font/droid-serif/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/droid-serif/DroidSerif-Regular-webfont.woff') format('woff'),
         url('font/droid-serif/DroidSerif-Regular-webfont.ttf') format('truetype'),
         url('font/droid-serif/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DroidSerifItalic';
    src: url('font/droid-serif/DroidSerif-Italic-webfont.eot');
    src: url('font/droid-serif/DroidSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/droid-serif/DroidSerif-Italic-webfont.woff') format('woff'),
         url('font/droid-serif/DroidSerif-Italic-webfont.ttf') format('truetype'),
         url('font/droid-serif/DroidSerif-Italic-webfont.svg#DroidSerifItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DroidSerifBold';
    src: url('font/droid-serif/DroidSerif-Bold-webfont.eot');
    src: url('font/droid-serif/DroidSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/droid-serif/DroidSerif-Bold-webfont.woff') format('woff'),
         url('font/droid-serif/DroidSerif-Bold-webfont.ttf') format('truetype'),
         url('font/droid-serif/DroidSerif-Bold-webfont.svg#DroidSerifBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'DroidSerifBoldItalic';
    src: url('font/droid-serif/DroidSerif-BoldItalic-webfont.eot');
    src: url('font/droid-serif/DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/droid-serif/DroidSerif-BoldItalic-webfont.woff') format('woff'),
         url('font/droid-serif/DroidSerif-BoldItalic-webfont.ttf') format('truetype'),
         url('font/droid-serif/DroidSerif-BoldItalic-webfont.svg#DroidSerifBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

.serif {
	font-family: 'DroidSerifRegular';
	letter-spacing:0.1px;
	font-size:11pt;
	line-height:1.4em;
}
.serif.bold {
	font-family: 'DroidSerifBold';
}
.serif.italic {
	font-family: 'DroidSerifItalic';
}
.serif.italic.bold {
	font-family: 'DroidSerifBoldItalic';
}
h5.serif, h5.serif *{font-size:9pt;}

/***************************************************************
/***************************************************************
/**************************************************************/





/*
-------------------------------------------------------------
6. MISC
-------------------------------------------------------------
*/






/*
-------------------------------------------------------------
6.1. Chrome and IE Scrollbar
-------------------------------------------------------------
*/



/*IE*/
body,html{
	scrollbar-face-color: #333;
	scrollbar-shadow-color: #333;
	scrollbar-highlight-color:#333;
	scrollbar-3dlight-color: #333;
	scrollbar-darkshadow-color: #333;
	scrollbar-track-color: #777;
	scrollbar-arrow-color: #C1C1D1;
}

/*Webkit based, Chrome, Safari... */
::-webkit-scrollbar {height: 8px;width:8px;background: #333;} 
/* Track */
::-webkit-scrollbar-track {-webkit-border-radius: 0px;border-radius: 0px;} 
/* Handle */
::-webkit-scrollbar-thumb {-webkit-border-radius: 0px;border-radius: 0px;background: #777;}
::-webkit-scrollbar-thumb:window-inactive {background: #333;}

/***************************************************************
/***************************************************************
/**************************************************************/




/*
-------------------------------------------------------------
6.2. Comments
-------------------------------------------------------------
*/



ol.commentlist {list-style: none;}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {margin-bottom:10px;min-height:60px;clear:both;}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {font-style: normal; float:left; margin-right:5px;}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {float:left; margin:0 10px 10px 0;}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {display:none;}
ol.commentlist li.comment div.commentmetadata {font-size:11pt !important;}
ol.commentlist li.comment div.comment-meta {font-size: 10px;}
ol.commentlist li.comment div.comment-meta a {color: #ccc;}
ol.commentlist li.comment .comment-body p {margin-left:70px;}

ol.commentlist li.comment ul {}
ol.commentlist li.comment div.reply {font-size: 11pt;margin-left:70px;clear:both;margin-bottom:10px;}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment div#respond {margin:10px 0 60px 70px;}
ol.commentlist li.comment div.cancel-comment-reply {float:right;background:#5f5f5f !important;}
ol.commentlist li.comment div.cancel-comment-reply:hover {float:right;background:#4f4f4f !important;}
ol.commentlist li.comment div.cancel-comment-reply:active {float:right;background:#fff !important; color:#000 !important;}


ol.commentlist li.comment ul.children {list-style: none; margin: 0;clear:both;}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {margin: 0 0 10px 10px;}
ol.commentlist li.comment ul.children li.depth-3 {margin: 0 0 10px 10px;}
ol.commentlist li.comment ul.children li.depth-4 {margin: 0 0 10px 10px;}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {margin: 0 0 10px 10px;}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

.comment-body{margin-bottom:10px;}

textarea#comment{width:100%;height:140px;margin:5px 0 5px 0;	font-family:'weblysleek', Arial, sans-serif;	font-size:11pt;background-color:#d2d2d2;border:0px;}
div#respond{clear;both;}
div#respond input[type=text]{	
	height:32px;
	width:50%;
	background:#d2d2d2;color:black;
	border:0px;
	padding-left:10px;
	font-family:'weblysleek', Arial, sans-serif;font-size:11pt;font-weight:lighter;font-style:normal;
	margin:0 0 10px 0;
}
.submit, #submit{
		float:right;
		border:2px solid #fff;
		color:white;
		padding:5px 20px 5px 20px;
		display:inline-block;
		background:#008287;
		font-family:'weblysleek', Arial, sans-serif;
		font-size:11pt;
		margin:0 0 0 10px;
}
.submit:hover{background:#219297;}
.submit:active,.submit:active > *{color:black !important;background:white !important;}



/***************************************************************
/***************************************************************
/**************************************************************/






/*
-------------------------------------------------------------
6.3. Calendar
-------------------------------------------------------------
*/

#wp-calendar{
	width:100%;
	height:auto;
	
}
#wp-calendar caption{
	font-size:21pt;
	text-align:left;
	padding:10px;
}
#wp-calendar th{
	text-align:left;
}
#wp-calendar td{
	padding-top:4px;
	margin-right:1px;
	height:20px;
	border-bottom:6px solid;
	box-sizing:border-box;
	vertical-align:top;
}
#wp-calendar td#today{
	background:gray;
}


/***************************************************************
/***************************************************************
/**************************************************************/

/*
-------------------------------------------------------------
6.4. CSS3 animations
-------------------------------------------------------------
*/

.hoverMoveRight{ 
	-webkit-transition: margin 0.2s ease-out; 
	-moz-transition: margin 0.2s ease-out; 
	-o-transition: margin 0.2s ease-out; 
}
.hoverMoveRight:hover { margin-left: 2px; }
.black-to-transparent{
	-webkit-transition: display 1s ease-out; 
	-moz-transition: display 1s ease-out; 
	-o-transition: display 1s ease-out; 
}


/***************************************************************
/***************************************************************
/**************************************************************/
/*
-------------------------------------------------------------
6.5. WP CLASSES
-------------------------------------------------------------
*/

.wp-caption {}
.wp-caption-text {}
.sticky {}
.gallery-caption {}
.aligncenter {}



/***************************************************************
/***************************************************************
/**************************************************************/

/*
-------------------------------------------------------------
7. MEDIA QUERIES, mobile, disabled js
-------------------------------------------------------------
*/





@media all and (max-height: 660px){
	body {margin-top:100px; }
	body header {top: 21px;}
	body.admin-bar header {top: 45px;}
	
	
}
@media all and (max-height: 800px){
	.tile.high{height:310px;}
}

	body.mm-orientation-vertical {
		overflow-y:visible;
		margin-top:20px;
		margin-left:60px;
		background-position:50% 0% !important;
		width: auto !important;
	}
	body.mm-orientation-vertical header{
		position:static !important;
		margin-bottom:30px;	
		white-space:normal;		
		line-height:50px;
	}
	body.mm-orientation-vertical .hideinmobile { display: none;}
	
	body.mm-orientation-vertical #backbutton{
		position:static; display:inline-block;margin-right:10px;margin-left:0;
	}
	
	body.mm-orientation-vertical #contentholder{margin-right:20px;}
	body.mm-orientation-vertical .verticalScroll{height:auto !important;}

	body.mm-orientation-vertical .controlFooter{
		position: static !important;
		float:right;
		height:100px;
		margin-right:-10px;
		margin-top:40px;
		min-width:220px;
	}
	body.mm-orientation-vertical .author-box, body.mm-orientation-vertical .copyright-info{display:none;}
	
	
@media all and (max-height: 620px) , screen and (max-width: 700px){
	
	html{overflow-y: auto !important;}
	body {
		overflow-y:visible;
		overflow-x: visible;
		margin-top:20px;
		margin-left:40px;
		background-position:50% 0% !important;
	}
	
	#indexContent, #blog{}
	
	#last-post-fullscreen{display:none;}
	
	header{
		position:static !important;
		margin-bottom:30px;	
		white-space:normal;		
		line-height:50px;
	}
	.hideinmobile { display: none;}
	
	#navbar {
		max-width: 100%;
		box-sizing: border-box;
	}
	
	
	#backbutton{
		position:static; display:inline-block;margin-right:10px;margin-left:0;
	}
	
	#contentholder{min-width:270px;max-width: 900px;}
	
	.columnContent,.welcome-column{
		width:100% !important;		
		min-width:210px;		
	}	
	.welcome-column{ margin-left: 5px;}

	.singleColumn{margin-bottom:40px;margin-right:0px;width:auto !important;}
	
	#gropus-container > div.single-group {    
		vertical-align: top ;	
		display: block ;
		white-space:normal;
		
	}	

	#indexContent > * {display:block;} 
	
	img.size-full{width:100%;height:auto;}
	
	.shortcode.video{width:100% !important;}
	
	.verticalScroll:not(nav){
		margin-top:20px;margin-bottom:40px;
		height: inherit !important;
	}
	/*thats to allow vertical isotope*/

	.controlFooter{
		position: static !important;
		float:right;
		height:100px;		
		margin-top:20px;
		text-align: right;
		
	}	
	
	.tile.gallerrytile{max-width:220px;}
	
	.mm_dialog_notification {display: none !important;}
	.xbiggroup{margin-right:0;}
	
	.author-box, .copyright-info{display:none;}
	
	.tile.bigwide{width:310px;}
	.tile.bigwide .bottom-label{width:100%;}

	.portfolio-featured-box.full{
		position: relative;
		width:100%;
		height:470px;
		
	}
	#portfolio .singleColumn {
		max-height:none;
	}
	
	
	#tabletTapper {
		z-index:9999;
	}	
	
	/*1.07*/
	a.tileanchor {
		width: auto !important;
		position: static !important;
	}
	
	.tile {
		width: auto !important;
		height: auto !important;
		min-height: 150px;
		position: relative !important;
		top: 0 !important;
		left: 0 !important;
		
	}
	.portfoliotile,.gallerrytile {
	    min-height: 320px;
	    width: auto !important;
	    max-width: none !important;
	    background-size: cover;
	}
	.tile.panoramic  {
		min-height:70px;
	}
	.tile table {
		min-height: 150px;
	}
	.tile:hover {
		margin: 5px;
		border: none;
		
	}
	.singleColumn,.blogtile-content  {
		height: auto !important;
	}
	.small-hide {
		display: none !important;
	}
	#gallerry .singleColumn, #blog .singleColumn, #portfolio .singleColumn {
	    padding-right: 0px;
	}
	.portfolio-featured-box {
	    width: auto !important;
	}
	.bottom-label {
	    position: relative !important;
	}
	
}

@media all and (max-width: 600px){
	.onethird,.onehalf,.twothird{width:100%;float:none;padding-left:0 !important;padding-right:0 !important;}
	.iconlist{width:100% !important;}
	img {max-width:100%;height:auto;}
	#mm_dialog > div {width:80%;}
	.labeled{width:100% !important;float:none;}
	
	
}
@media handheld { 
	body{
		background-position:center !important;
	} 

}
/*FOR DISABLED JS*/
body.js-disabled #navbar:hover{left:0;}
body.js-disabled #gropus-container > div.single-group {display: block;}
body.js-disabled header{position:static !important;}
body.js-disabled {overflow-y:visible;margin-top:20px;}
body.js-disabled {}

body.mm-non-mobile .chart{max-height:300px;}
/***************************************************************
/***************************************************************
/**************************************************************/

/* #blog,#gallerry,.fullHeight,.singleColumn,.column{!height:100%;} columnizer bug in ie8*/
