@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
@charset "utf-8";

*{
	margin:0;
	padding:0;
	border:0;
}

a{
	text-decoration:none;
	border:none;
	color: #333;
}


body{
	font:62.5%/1.5 "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}

#bodypat{
    background-color: #ffffff;
	//background:url(../images/bg_pattern1.jpg) repeat fixed;
	width:100%;
	height:100%;
}
#container{
	max-width:100%;
	text-align:center;
	margin: 20px;
	overflow:hidden;
}

.clearfix:after{
	content:" ";
	clear:both;
	height:0;
	visibility:hidden;
	display:block;
}

.centered{
	margin:0 auto;
}

h1,
h2,
h3,
h4,
h5{
	font-weight:normal;
	padding:0px 0;
}
h1{
    font-size:6.2em;
	color:#f0f0f0;
	letter-spacing:-0.045em;
	line-height: 68px;
	font-family: "Times New Roman", Times, serif;
}
h2{
    font-size:2.0em;
}
h3{
    font-size:2.4em;
}
h4{
    font-size:2.2em;
    color:#666;
    letter-spacing:-0.045em;
    font-family: Lato;
    font-weight: 400;
    margin-bottom: 5px;
    display: inline-block;
}
h5{
    font-size:2.0em;
}

h7{
    font-size: 30px;
    color:#333;
    letter-spacing: 0;
    line-height: 36px;
    text-transform: capitalize;
    font-family: Lato;
    font-weight: 300;
    margin-top: 20px;
    display: inline-block;
    width: 100%;
}

p{
	font-size: 14px;
	color: #666;
	padding-bottom: 0px;
	font-weight: 400;
}

/*----------------------------------------------------------------------------
Content - Page (General)
----------------------------------------------------------------------------*/
.logo {
	position: fixed;
	z-index: 1001;
	font-size: 42px;
	letter-spacing: 4px;
	color: #121212;
	text-shadow: 0px 0px 0 #121212;
	transition: all 0.15s linear;
	-moz-transition: all 0.15s linear;
	-webkit-transition: all 0.15s linear;
	-o-transition: all 0.15s linear;
	top: 0px;
	text-align: center;
	left: 47%;
	width: 6%;
	font-family: 'Permanent Marker', cursive;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .logo{
/*	text-shadow: 8px 0 0 #343434;
	padding-left: 4px;*/
}

.onoffswitch {
    position: relative;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select: none;
    margin-top: 48px;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    overflow: hidden; cursor: pointer;
    border: 0px solid #ff0000; border-radius: 5px;
}
.onoffswitch-inner {
	color: #fff;
    left: 0; height: 30px;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    float: left; width: 20px; height: 20px; padding: 0; line-height: 7px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
	opacity: 0;
    content: "";
    padding-left: 10px;
    background-color: #EEEEEE; color: #FFFFFF;
}
.onoffswitch-inner:after {
	opacity: 0;
    content: "";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
	color: #555;
	font-size: 20px;
	text-align: center;
	font-weight: 200;
	letter-spacing: 2px;
	width: 100px;
	height: 20px;
	background: none;
	font-family: Lato;
	position: fixed;
	top: 21px;
	right: 20px;
	-moz-transition: all 0.3s ease-in 0s;
	-webkit-transition: all 0.3s ease-in 0s;
	-o-transition: all 0.3s ease-in 0s;
	transition: all 0.3s ease-in 0s;
	z-index: 1;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
	border: 0px solid #edff26;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .highlights-txt{
	opacity: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .highlights-txt h2{
	opacity: 0;
}

.onoffswitch-switch span2{
	color: #fff;
	opacity: 1;
	border: 2px dotted #121212;
	width: 16px;
	height: 16px;
	border-radius: 20px;
	display: inline-block;
	margin: 5px;
}
.onoffswitch-switch span1{
	color: #fff;
	opacity: .1;
	border: 2px solid #565656;
	background: #565656;
	width: 16px;
	height: 16px;
	border-radius: 20px;
	display: inline-block;
	margin: 5px 10px;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch span2{
    opacity: 0.2;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch span1{
	opacity: 1;
}

#thepresentisthepast p {
	padding-right: 30px;
}


.highlights img{
	opacity: 1;
	border-radius: 100%;
	overflow: hidden;
	transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	width: 80%;
	height: auto;
	margin: 10% 0;
}

.highlights-txt{
	text-align: center;
	position: absolute;
	background: rgba(255,255,255,1);
	opacity: 1;
	border-radius: 100%;
	overflow: hidden;
	top: 11%;
	left: 11%;
	width: 78%;
	height: 78%;
	vertical-align: middle;
	transition: all 0.1s linear;
	/* display: none; */
}
.mainpage{
	width: 100%;
	text-align:left;
	overflow: hidden;
}
.fixed-medium{
	width: 12.5%;
	overflow:hidden;
	float:left;
	position: relative;
	line-height: 0;
}

.fixed-medium:hover{
	
}

.fixed-medium:hover .highlights-txt{
	opacity: 0;
}

.fixed-medium:hover img{
	opacity: 1.0;
	overflow: hidden;
}

.fixed-medium:after{
	clear:both;
	display:block;
	content:" ";
}

.fixed-medium:hover .fixed-cat{
	visibility:hidden;
	line-height: 20px;
}

.fixed-medium:hover p{
	color:#fff;
	font-weight: 300;
	letter-spacing: 0.05em;
	float: left;
	padding-left: 0px;
	display: none;
}
.fixed-cat{
	position:absolute;
	line-height: 0px;
	top: 0;
	left: 0;
	z-index:99;
	text-align:left;
	padding:5px 15px 5px 10px;
	visibility:hidden;	
	letter-spacing: 0.1em;
	text-transform: lowercase;
	background-color: #ffffff;
	
	transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-webkit-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
}


.fixed-medium h2{
	opacity: 1;
	font-family: Lato;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 14px;
	vertical-align: middle;
	height: auto;
	width: 100%;
	display: inline-block;
	transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	-webkit-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
	line-height: 20px;
	letter-spacing: 0;
	padding: 45% 0;
}
.fixed-medium:hover h2{
	opacity: 1;
	color: #565656;
}

.fixed-medium p{
	font-family: Lato;
	color:#454545;
	font-size:11px;
	font-weight:400;
	float: right;
	letter-spacing: -5em;
	transition:letter-spacing 0.15s, color 0.5s;
	-webkit-transition:letter-spacing 0.15s, color 0.5s;
}
.no-bottom{
	margin-bottom:0px;
}


/*----------------------------Mobile Version--------------------------------*/
@media all and (max-width:970px) {
.mainpage{
	width:100%;
	margin:0;
}
.fixed-medium{
	float:none;
	max-width:100%;
}
.highlights{
	float:left;
}
.highlights-txt{
	float:left;
	width:50%;
}
}
@media all and (max-width:640px) {

#container{
	max-width:100%;
	text-align:center;
	margin: 0 10px 20px 10px;
}
.onoffswitch {
	margin-top: 110px;
}
.logo {
	width: 100%;
    left: 0;
}

.onoffswitch-switch {
	top: 20px;
	right: 0px;
	display: none;
}

#page{
	width:100%;
	margin-left:0;
}
.fixed-medium{
	overflow:hidden;
	margin: 0;
	width: 49%;
	display: inline-block;
}

.fixed-medium:hover{
}
.highlights{
	float:none;
}
.highlights-txt{
	text-align: center;
	position: absolute;
	background: rgba(255,255,255,0);
	opacity: 0;
	border-radius: 100%;
	overflow: hidden;
	top: 9%;
	left: 9%;
	width: 82%;
	height: 82%;
	vertical-align: middle;
}
.feature-text{
	padding-top:0;
}
}

/*----------------------------------------------------------------------------
Tile Preview (Lightbox)
----------------------------------------------------------------------------*/
.tile-pre{
	display:none;
}
.lb-article,
.lb-portfolio{
	width: 100%;
}

.lb-article .app p{
	padding-right: 10px;
}
.lb-article .app h7{
	margin-top: 12px;
	width: auto;
	position: absolute;
	margin-left: 16px;
}
.lb-article .app .toggle-button {
	display: inline-block;
	margin-right: 10px;
	border: 1px solid #dadada;
	padding: 5px 10px;
	border-radius: 4px;
}
.lb-article .app-last{
	float: right;
	margin-right: 0;
}

.lb-quote{
	color:#fbfbfb;
	margin:50px 20px 20px 20px;
}
.lb-title,
.lb-project{
	color:#fbfbfb;
}
.toggle-button
.lb-title a,
.lb-project a{
	color:#fbfbfb;
	text-decoration:none !important
}
.lb-excerpt,
.lb-desc{
	/* color:#bfbfbf; */
	padding: 15px 0;
}
.lb-excerpt a:hover,
.lb-desc a:hover{
	text-decoration:underline;
}
.lb-port-cont{
	float:right;
	max-width:310px;
	display:block;
}
.lb-video p{
	padding:0 30px 20px 30px;
	color:#bfbfbf;
}
.lb-video p a:first-child{
	font-size:2.2em;
	color:#fbfbfb;
	display:block;
	padding-top:25px;
	padding-bottom:20px;
}
.lb-video p:last-child{
	padding-bottom:30px;
}
.lb-video object,
.lb-video object embed{
	width:100%;
	z-index:100;
}
.article-date{
	float:right;
	margin: 8px 5px 0 0;
	color:#ddd;
	position:relative;
	display: none;
}
.article-date span.date{
	font-size: 37px;
	letter-spacing:-0.1em;
	font-family: Lato;
	font-weight: 300;
}
.article-date span.month{
	font-size: 2em;
	color:#bababa;
	position:absolute;
	right:0px;
	top:25px;
	font-family: Lato;
	font-weight: 300;
}

/*----------------------------Mobile Version--------------------------------*/
@media all and (max-width:640px) {
.lb-article,
.lb-portfolio{
	width:auto;
}

.lb-article .app {
	text-align: left;
	margin-bottom:40px;
	padding: 0;
}
.lb-article .app img{/* margin-left: 10px; */}
.lb-article .app .toggle-button {
	margin: 10px 2px 0 0;
}
.portfolio-img{
	max-width:100%;
	float:none;
}
.lb-project,
.lb-desc{
	float:none;
}
.lb-port-cont{
	float:left;
}
}

/*----------------------------------------------------------------------------
Content - Universal
----------------------------------------------------------------------------*/
.break{
	background-color:#dadada;
	width:100%;
	height:1px;
	display:block;
	clear:both;
	margin: 10px 0;
}
.break.last{
	background-color:#fff;
	width:100%;
	height:100px;
	margin:0;
}
.break2{
	background-color:#333;
	width:100%;
	height:1px;
	display:block;
	clear:both;
	margin:0 0 10px 0;
}
.one,
.one-half,
.one-third,
.two-thirds,
.one-fourth,
.three-fourths{
	margin: 0;
	float:left;
	position:relative;
}
.one-half h2,
.one-third h2,
.two-thirds h2,
.one-fourth h2,
.three-fourths h2,
.one-half h3,
.one-third h3,
.two-thirds h3,
.one-fourth h3,
.three-fourths h3{
	color:#f7f7f7;
}
.one {
	width: 100%;
}
.one-half{
	width:50%;
}
.one-half img{
	/* width:100%; */
}
.one-third{
	width:33.333333%;
}
.two-thirds{
	width:66.666667%;
}
.one-fourth{
	width: 25%;
	float: left;
}
.three-fourths{
	width: 75%;
}



.col-offset-12 {
  margin-left: 100%;
}
.col-offset-11 {
  margin-left: 91.66666667%;
}
.col-offset-10 {
  margin-left: 83.33333333%;
}
.col-offset-9 {
  margin-left: 75%;
}
.col-offset-8 {
  margin-left: 66.66666667%;
}
.col-offset-7 {
  margin-left: 58.33333333%;
}
.col-offset-6 {
  margin-left: 50%;
}
.col-offset-5 {
  margin-left: 41.66666667%;
}
.col-offset-4 {
  margin-left: 33.33333333%;
}
.col-offset-3 {
  margin-left: 25%;
}
.col-offset-2 {
  margin-left: 16.66666667%;
}
.col-offset-1 {
  margin-left: 8.33333333%;
}
.col-offset-0 {
  margin-left: 0;
}




article ul{
	padding:0 0 20px 20px;
	font-size:1.4em;
}
article ul li{
	padding:5px 0;
}
/*--------------------------Toggle and Accordion------------------------*/
.toggle-button,
.ac-tab{
	font-size:14px;
	text-align:left;
	padding-bottom:10px;
	color: #787878;
	margin-top:0px;
	border-bottom:1px solid #dadada;
	transition:background 0.5s;
	-moz-transition:background 0.5s;
	-webkit-transition:background 0.5s;
	-o-transition:background 0.5s;
}
.toggle-button:hover,
.ac-tab:hover{
	color: #232323;
	cursor:pointer;
}
.mainpage .toggle-button:hover{
	background: url(../images/montage1.png) no-repeat left;
	cursor:pointer;
	background-position: 20px;
}

.mainpage .toggle-button{
	text-align:left;
	height: 100%;
	background: url(../images/montage2.png) no-repeat left;
	border-bottom: none;
	border-left: 3px solid #ffffff;
	background-position: 20px;
	margin-bottom: 20px;
}


.toggle-content{
	display:block;
}
.mainpage .toggle-content{
	margin-top:0px;
}
#content .toggle-content{
	border:1px solid;
	border-top:0;
	padding:20px 20px 0 20px;
}
.toggle-indicator{
	float:right;
	margin-right:0px;
}
.mainpage .toggle-indicator{
	float:none;
}
.close{
	display:none;
}
.table-details{
	display:none;
	padding:0px;
	font-size:0.857em;
}

/*-------------------------Paragraph Highlights-----------------------------*/
.hl1{
	border-top: 0px solid;
	margin: 40px 10px 40px 20px;
	text-align: left;
}
div.hl1 h2{
	font-size: 13px;
	font-weight: 400;
	color: #666;
	letter-spacing: 1px;
}
div.hl1 h6{
	font-style:italic;
	padding-bottom: 5px;
	color: #666;
	font-weight: 400;
	letter-spacing: 1px;
	font-size:12px;
}

/*----------------------------Mobile Version--------------------------------*/
@media all and (max-width:768px) {
	.mainpage .toggle-button{
		height:40px;
	}
	.mainpage .toggle-indicator{
		font-size:2em;
		line-height:40px;
	}
}
@media all and (max-width:640px) {
	#content-title{
		margin-left:0;
		margin-right:0;
	}
	.one-half,
	.one-third,
	.two-thirds,
	.one-fourth,
	.three-fourths{
		margin:0;
		float:none;
		display:block;
		width:100%;
	}
	.one-half .table-content{
		width:100%;
		margin-bottom:20px;
	}
	.one-third .table-content{
		margin-bottom:20px;
	}

	.table-info ul li{
		text-align:center;
		padding: 20px 0 20px 0;
	}

	.hl4{
		text-align:center;
		padding:0px 0 0 0;
	}

	.hl1{
		margin: 20px 10px 0;
		width: 95%;
	}

	footer #footer-social{
		border-top: 1px solid #ddd !important;
		padding-top:20px;
		margin: 20px 0 0 0;
		text-align: center !important;
	}

	.hl1 p{
		padding:0 20px 0 0;
	}
}


/*----------------------------------------------------------------------------
Content - Bloglist and Portfoliolist(Left)
----------------------------------------------------------------------------*/
.portfoliolist{
	position:relative;
	overflow:hidden;
}

/*----------------------------------------------------------------------------
Content - Blog and Portfolio Tile (Left)
----------------------------------------------------------------------------*/
#filter{
	position: fixed;
	top: 0;
	cursor: pointer;
	z-index: 1;
	padding: 20px 0 25px;
	width: 100%;
	margin-left: -10px;
	background: rgba(255,255,255,0);
	transition:all 0.3s;
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s;
}

#filter:hover{
	background: rgba(255,255,255,.97);
}

#filter:hover ul#port-filter{
	opacity: 1;
}

ul#port-filter{
	font-size:1.4em;
	list-style:none;
	transition:all 0.3s;
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s;
	float: left;
	margin-left: 20px;
}
ul#port-filter li{
	float:left;
	line-height:30px;
	font-size:14px;
	padding: 0;
	margin: 0;
	transition:background 0.3s;
	-moz-transition:background 0.3s;
	-webkit-transition:background 0.3s;
	-o-transition:background 0.3s;
	/* display: inline-block; */
}

ul#port-filter li a{
	color: rgba(0,0,0,.2);
	padding: 10px;
	transition: all 0.3s;
}
.about{
	color: #565656;
	font-size:14px;
	padding: 0 20px 0 0;
	background: transparent;
	font-family: Lato;
	border-right: 1px solid #bbb;
	margin-right: 10px;
	cursor: pointer;
}
button:focus { outline: none; }

ul#port-filter li:hover a{
	color:#565656;
}
ul#port-filter li:last-child{
	margin-right:0;
}
#content ul#port-filter a:hover{
	text-decoration:none;
}
li.filter-current a{
	color:#565656 !important;
	font-style: italic;
}
#portfolio,
#blogs{
	text-align:center;
	display:inline-block;
}
#portfolio .tile,
#blogs .tile{
	border-width:0;
	position:relative;
}
#portfolio .tile:hover,
#blogs .tile:hover{
	border:5px solid #000;
	margin:-5px 0 5px 0;
}
#portfolio .fade,
#blogs .fade{
	opacity:1.0;
	filter:alpha(opacity=100);
}
#portfolio .tile:hover  .pl-projecttitle,
#blogs .tile:hover .bl-posttitle{
	opacity:1.0;
	filter:alpha(opacity=100);
}
#blogs .large .tile-cat{
	visibility:visible;
}
#blogtile-left .pagination,
#portfoliotile-left .pagination{
	margin:20px 5px;
}
#blogtile-left .pagination .pages,
#portfoliotile-left .pagination .pages{
	margin-right:10px;
}

#portfolio .large:hover .tile-cat{
	visibility:visible;
}

#portfolio .medium:hover .tile-cat{
	visibility:visible;
}

#portfolio .small:hover .tile-cat{
	visibility:visible;
}

#portfolio .triple:hover .tile-cat{
	visibility:visible;
}

#portfolio .verticle:hover .tile-cat{
	visibility:visible;
}


#portfolio .long:hover .tile-cat{
	visibility:visible;
}


/*----------------------------Mobile Version--------------------------------*/
@media all and (max-width:970px) {
#portfoliotile-left,
#blogtile-left{
	width:67%;
}
#portfolio .tile,
#blogs .tile{
	float:none;
}
#portfolio .small{
	float:left;
}
}
@media all and (max-width:640px) {

#filter{
	top: 0px;
	padding: 60px 0 15px 0;
	width: 100%;
	margin-left: 0;
	background: rgba(255,255,255,.97);
	/* border-bottom: 1px solid #ddd; */
}
ul#port-filter{
	padding: 0;
	margin: 0;
	float: left;
}
ul#port-filter li{
	line-height:30px;
	font-size:14px;
	margin: 0;
}
.about{
	position: absolute;
	right: 0;
	top: 25px;
	font-size:14px;
	border-right: none;
	display: none;
}

#portfoliotile-left,
#blogtile-left{
	float:none;
	width:100%;
	margin-left:0;
}
#blogtile-left .pagination,
#portfoliotile-left .pagination{
	margin:20px 0;
}
#blogtile-left .pagination .pages,
#portfoliotile-left .pagination .pages{
	margin-right:0;
}
}

/*----------------------------------------------------------------------------
Footer
----------------------------------------------------------------------------*/
footer{
	margin:0 5px 0px 0px;
}
footer > small{
	font-size:1.2em;
	line-height:30px;
	color:#bfbfbf;
	float:left;
}
footer #footer-social{
	top: 0;
	text-align: right;
}

.behance-mini,
.dribbble-mini,
.facebook-mini,
.flickr-mini,
.forrst-mini,
.linkedin-mini,
.pinterest-mini,
.tumblr-mini,
.twitter-mini,
.vimeo-mini{
	background:url(../images/social-mini.png) no-repeat;
	width:30px;
	height:30px;
	margin-right:0;
	display:inline-block;
	transition:background 0.2s;
	-moz-transition:background 0.2s;
	-webkit-transition:background 0.2s;
	-o-transition:background 0.2s;
}

.resume-mini{
	background:url(../images/resume.png) no-repeat;
	width:60px;
	height:30px;
	margin-right:0;
	display:inline-block;
	transition:background 0.2s;
	-moz-transition:background 0.2s;
	-webkit-transition:background 0.2s;
	-o-transition:background 0.2s;
}

.resume-mini{
	background-position:0 0;
}
.resume-mini:hover{
	background-position:-60px 0;
}



.behance-mini{
	background-position:0 0;
}
.behance-mini:hover{
	background-position:-30px 0;
}
.dribbble-mini{
	background-position:0 -30px;
}
.dribbble-mini:hover{
	background-position:-30px -30px;
}
.facebook-mini{
	background-position:0 -60px;
}
.facebook-mini:hover{
	background-position:-30px -60px;
}
.flickr-mini{
	background-position:0 -90px;
}
.flickr-mini:hover{
	background-position:-30px -90px;
}
.forrst-mini{
	background-position:0 -120px;
}
.forrst-mini:hover{
	background-position:-30px -120px;
}
.linkedin-mini{
	background-position:0 -150px;
}
.linkedin-mini:hover{
	background-position:-30px -150px;
}
.pinterest-mini{
	background-position:0 -180px;
}
.pinterest-mini:hover{
	background-position:-30px -180px;
}
.tumblr-mini{
	background-position:0 -210px;
}
.tumblr-mini:hover{
	background-position:-30px -210px;
}
.twitter-mini{
	background-position:0 -240px;
}
.twitter-mini:hover{
	background-position:-30px -240px;
}
.vimeo-mini{
	background-position:0 -270px;
}
.vimeo-mini:hover{
	background-position:-30px -270px;
}


/*----------------------------------------------------------------------------
MetroJS
----------------------------------------------------------------------------*/
/* ------ Hardware Accelerated CSS3 Animations --------*/
.live>.ha.flip-front{   
	position:absolute;
	/* time to start repeating ourselves 
	note: we are not setting a duration or delay here, 
	that is added in script */
	-webkit-animation-name:flipfront180;
	-webkit-animation-play-state:paused;
	-webkit-animation-fill-mode:forwards;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-moz-animation-name:flipfront180;
	-moz-animation-play-state:paused;
	-moz-animation-fill-mode:forwards;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: linear;
	-ms-animation-name:flipfront180;
	-ms-animation-play-state:paused;
	-ms-animation-fill-mode:forwards;
	-ms-animation-iteration-count: 1;
	-ms-animation-timing-function: linear;
	-o-animation-name:flipfront180;
	-o-animation-play-state:paused;
	-o-animation-fill-mode:forwards;
	-o-animation-iteration-count: 1;
	-o-animation-timing-function: linear;
	animation-name:flipfront180;
	animation-play-state:paused;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-timing-function: linear;
}

.live>.ha.flip-back{
	position:absolute;
	-webkit-animation-name:flipback180;
	-webkit-animation-play-state:paused;
	-webkit-animation-fill-mode:forwards;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-moz-animation-name:flipback180;
	-moz-animation-play-state:paused;
	-moz-animation-fill-mode:forwards;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: linear;
	-ms-animation-name:flipback180;
	-ms-animation-play-state:paused;
	-ms-animation-fill-mode:forwards;
	-ms-animation-iteration-count: 1;
	-ms-animation-timing-function: linear;
	-o-animation-name:flipback180;
	-o-animation-play-state:paused;
	-o-animation-fill-mode:forwards;
	-o-animation-iteration-count: 1;
	-o-animation-timing-function: linear;
	animation-name:flipback180;
	animation-play-state:paused;
	animation-fill-mode:forwards;
	animation-iteration-count: 1;
	animation-timing-function: linear;
}

/* Flip Vertical */
  @-keyframes flipfront180 {
	from     {  z-index:20; transform: rotateX(0deg); }
	49%      {  z-index:20; }
	50%      {  z-index:10; }
	to       {  z-index:10; transform: rotateX(-180deg); }
  }
  @-webkit-keyframes flipfront180 {
	from     {  z-index:20; -webkit-transform: rotateX(0deg); }
	49%      {  z-index:20; }
	50%      {  z-index:10; }
	to       {  z-index:10; -webkit-transform: rotateX(-180deg);  }
  }
  @-moz-keyframes flipfront180 {
	0%     {  z-index:20; -moz-transform: rotateX(0deg); }
	49%      {  z-index:20; }
	50%      {  z-index:10; }
	100%       {  z-index:10; -moz-transform: rotateX(-180deg); }
  }
   @-ms-keyframes flipfront180 {
	from     {  z-index:20; -ms-transform: rotateX(0deg); }
	49%      {  z-index:20; }
	50%      {  z-index:10; }
	to       {  z-index:10; -ms-transform: rotateX(-180deg); }
  }
   @-o-keyframes flipfront180 {
	from     {  z-index:20; -o-transform: rotateX(0deg); }
	49%      {  z-index:20; }
	50%      {  z-index:10; }
	to       {  z-index:10; -o-transform: rotateX(-180deg); }
  }
  @-keyframes flipback180 {
	0%     {  z-index:10; transform: rotateX(180deg); }
	49%      {  z-index:10; }
	50%      {  z-index:20; }
	100%       {  z-index:20; transform: rotateX(0deg); }
  }
  @-webkit-keyframes flipback180 {
	from     {  z-index:10; -webkit-transform: rotateX(180deg);  }
	49%      {  z-index:10; }
	50%      {  z-index:20; }
	to       {  z-index:20;  -webkit-transform: rotateX(0deg); }
  }
  @-moz-keyframes flipback180 {
	0%     {  z-index:10; -moz-transform: rotateX(180deg); }
	49%      {  z-index:10; }
	50%      {  z-index:20; }
	100%       {  z-index:20; -moz-transform: rotateX(0deg); }
  }
  @-ms-keyframes flipback180 {
	from     {  z-index:10; -ms-transform: rotateX(180deg); }
	49%      {  z-index:10; }
	50%      {  z-index:20; }
	to       {  z-index:20; -ms-transform: rotateX(0deg); }
  }
  @-o-keyframes flipback180 {
	from     {  z-index:10; -o-transform: rotateX(180deg); }
	49%      {  z-index:10; }
	50%      {  z-index:20; }
	to       {  z-index:20; -o-transform: rotateX(0deg); }
  }
  
  /* Flip Horizontal */
  @-keyframes flipfrontY180 {
	0%      {  z-index:20; transform: rotateY(0deg); }
	49%     {  z-index:20; }
	50%     {  z-index:10; }
	100%    {  z-index:10; transform: rotateY(-180deg); }
  }
  @-webkit-keyframes flipfrontY180 {
	from     {  z-index:20; -webkit-transform: rotateY(0deg); }
	49%      {  z-index:20; }
	50%      {  z-index:10; }
	to       {  z-index:10; -webkit-transform: rotateY(-180deg);  }
  }
  @-moz-keyframes flipfrontY180 {
	0%      {  z-index:20; -moz-transform: rotateY(0deg); }
	49%     {  z-index:20; }
	50%     {  z-index:10; }
	100%    {  z-index:10; -moz-transform: rotateY(-180deg); }
  }
   @-ms-keyframes flipfrontY180 {
	from     {  z-index:20; -ms-transform: rotateY(0deg); }
	49%      {  z-index:20; }
	50%      {  z-index:10; }
	to       {  z-index:10; -ms-transform: rotateY(-180deg); }
  }
   @-o-keyframes flipfrontY180 {
	from     {  z-index:20; -o-transform: rotateY(0deg); }
	49%      {  z-index:20; }
	50%      {  z-index:10; }
	to       {  z-index:10; -o-transform: rotateY(-180deg); }
  }
  @-keyframes flipbackY180 {
	0%     {  z-index:10; transform: rotateY(180deg); }
	49%      {  z-index:10; }
	50%      {  z-index:20; }
	100%       {  z-index:20; transform: rotateY(0deg); }
  }
  @-webkit-keyframes flipbackY180 {
	from     {  z-index:10; -webkit-transform: rotateY(180deg);  }
	49%      {  z-index:10; }
	50%      {  z-index:20; }
	to       {  z-index:20;  -webkit-transform: rotateY(0deg); }
  }
  @-moz-keyframes flipbackY180 {
	0%       {  z-index:10; -moz-transform: rotateY(180deg); }
	49%      {  z-index:10; }
	50%      {  z-index:20; }
	100%     {  z-index:20; -moz-transform: rotateY(0deg); }
  }
  @-ms-keyframes flipbackY180 {
	from     {  z-index:10; -ms-transform: rotateY(180deg); }
	49%      {  z-index:10; }
	50%      {  z-index:20; }
	to       {  z-index:20; -ms-transform: rotateY(0deg); }
  }
  @-o-keyframes flipbackY180 {
	from     {  z-index:10; -o-transform: rotateY(180deg); }
	49%      {  z-index:10; }
	50%      {  z-index:20; }
	to       {  z-index:20; -o-transform: rotateY(0deg); }
  }


/*
 * FancyBox - jQuery Plugin
 * Simple and fancy lightbox alternative
 *
 * Examples and documentation at: http://fancybox.net
 * 
 * Copyright (c) 2008 - 2010 Janis Skarnelis
 * That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated.
 * 
 * Version: 1.3.4 (11/11/2010)
 * Requires: jQuery v1.3+
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */

#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	margin-left: -20px;
	cursor: pointer;
	overflow: hidden;
	z-index: 1104;
	display: none;
}

#fancybox-loading div {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 360px;
	background-image: url('../images/fancybox/fancybox.png');
}

#fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1100;
	display: none;
}

#fancybox-tmp {
	padding: 0;
	margin: 0;
	border: 0;
	overflow: auto;
	display: none;
}

#fancybox-wrap {
	position: absolute;
	top: 0;
	left: 7% !important;
	padding: 0px;
	z-index: 1101;
	outline: none;
	display: none;
	width: 86% !important;
}

#fancybox-outer {
	position: relative;
	width: 100%;
	height: 100%;
	background: #fff;
}

#fancybox-content {
	width: 100% !important;
	height: 0;
	padding: 0;
	outline: none;
	position: relative;
	overflow: hidden;
	z-index: 1102;
	background:#fff;
	top: 40px;
}

#fancybox-hide-sel-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 1101;
}


#fancybox-close {
	position: absolute;
	top: 0px;
	right: 0;
	width: 32px;
	height: 32px;
	background: transparent url('../images/fancybox/fancy_options.png') 0px -32px;
	cursor: pointer;
	z-index: 1103;
	display: none;
}

#fancybox-close:hover{
	background-position:-32px -32px;
}


#fancybox-error {
	color: #444;
	font: normal 12px/20px Arial;
	padding: 14px;
	margin: 0;
}

#fancybox-img {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: none;
	outline: none;
	line-height: 0;
	vertical-align: top;
}

#fancybox-frame {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}


.fancybox-bg {
	position: absolute;
	padding: 0;
	margin: 0;
	border: 0;
	width: 0px;
	height: 0px;
	z-index: 1001;
}

#fancybox-title {
	font-family: Helvetica;
	font-size: 12px;
	z-index: 1102;
}

.fancybox-title-inside {
	padding-bottom: 10px;
	text-align: center;
	color: #333;
	background: #fff;
	position: relative;
}

.fancybox-title-outside {
	padding-top: 10px;
	color: #fff;
}

.fancybox-title-over {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #FFF;
	text-align: left;
}

#fancybox-title-over {
	padding: 10px;
	background-image: url('../images/fancybox/fancy_title_over.png');
	display: block;
}

.fancybox-title-float {
	position: absolute;
	left: 0;
	bottom: -20px;
	height: 32px;
}

#fancybox-title-float-wrap {
	border: none;
	border-collapse: collapse;
	width: auto;
}

#fancybox-title-float-wrap td {
	border: none;
	white-space: nowrap;
}

#fancybox-title-float-left {
	padding: 0 0 0 15px;
	background: url('../images/fancybox/fancybox.png') -40px -90px no-repeat;
}

#fancybox-title-float-main {
	color: #FFF;
	line-height: 29px;
	font-weight: bold;
	padding: 0 0 3px 0;
	background: url('../images/fancybox/fancybox-x.png') 0px -40px;
}

#fancybox-title-float-right {
	padding: 0 0 0 15px;
	background: url('../images/fancybox/fancybox.png') -55px -90px no-repeat;
}

/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */

 
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flexslider .slides iframe {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {margin: 0; position: relative; zoom: 1; color:#000;}
.mainslide{margin-bottom:0;}
.postslide{overflow:hidden;position:relative;}
article ul.slides li{padding:0;margin:0;}
article ul.flex-direction-nav{height:0;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}

.carousel li {margin-right: 5px}

.flex-title{
	position:absolute;
	top:50px;
	right:50px;
	padding:0 20px;
	font-size:4.8em;
	line-height:1.4em;
	letter-spacing: -0.09em;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-transform:uppercase;
}
/* Direction Nav */
.flex-direction-nav a {width: 30px; height: 40px; margin: -20px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */

.flex-control-nav {width: 100%; position: absolute; bottom: 0; text-align: center;}

.flex-control-nav li {margin: 0 6px 10px 6px; display: inline-block; zoom: 1; *display: inline;}

.flex-control-paging li a {width: 0px; height: 0px; display: block; cursor: pointer; text-indent: -9999px; border:0px solid #fff; transition:background 0.3s; -moz-transition:background 0.3s; -webkit-transition:background 0.3s; -o-transition:background 0.3s;}
.flex-control-paging li a:hover { background: #fff; border:0px solid;}
.flex-control-paging li a.flex-active { background: #fff; border:0px solid;}


@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
  .flex-direction-nav .flex-next {opacity: 1; right: 0;}
  
.flex-title{
	font-size:3.6em;
	line-height:50px;
}
}
@media screen and (max-width: 640px) {
.web {
	min-height: inherit !important;
	margin: 0 !important;
}
.web p {
	display: none;
}
.web .mainslide {
	width: 100% !important;
	top: 0 !important;
	left: 0 !important;
}
.web:before {
	display: none;
}
#fancybox-wrap {
	left: 2% !important;
	margin-top: 30px;
	width: 96% !important;
}
#fancybox-outer {
  padding: 0 10px;
  width: auto;
  background: #fff;
}
#fancybox-content {
	/* text-align:center; */
}
.flexslider .slides iframe { 
	height: auto;
}
.article-date{
	/* float:none; */
	display: none;
}
.article-date span.date {
  font-size: 20px;
}
.article-date span.month {
  position: relative;
  padding-left: 5px;
  top: 0;
  font-size: 1.5em;
}
h7{
    font-size: 24px;;
    line-height: 32px;
    display: inline-block;
}
.lb-title {
	/* margin-top:0px; */
}
.lb-excerpt, .lb-desc {
  padding: 10px 0px;
  line-height: 20px;
}
.flexslider{
	margin-top:0px;
}
.mainslide{margin-bottom:0px;}
.postslide{
	margin-top:0;
}
.flex-title{
	top:-40px;
	left:0;
	font-size:2.4em;
	line-height:40px;
	display:block;
	width:100%;
}
#fancybox-close { 
  right: 10px;
}
}

/*
 * Skin for jPlayer Plugin (jQuery JavaScript Library)
 * http://www.happyworm.com/jquery/jplayer
 */

.jp-jplayer > video{
	background:#000;
}
.jp-video,
.jp-audio {
    font-family:"Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    position:relative;
}
.jp-video-360p {
    width:100%;
    margin:0;
}
.jp-video-full {
    width:480px;
    height:270px;
    position:static !important;
    position:relative
}
.jp-video-full .jp-jplayer {
    top: 0;
    left: 0;
    position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */
    overflow: hidden;
    z-index:1000;
}
 
.jp-video-full .jp-gui {
    position: fixed !important; position: static; /* Rules for IE6 (full-screen) */
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    z-index:1000;
}
.jp-video-full .jp-interface {
    position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */
    bottom: 0;
    left: 0;
    z-index:1000;
}

/* Controls */
.jp-interface {
    position: relative;
    width:100%;
    height: 35px;
	background:#202020;
}
 
div.jp-controls-holder {
    clear: both;
    width:570px;
    margin: 0 auto;
     
    position: relative;
    overflow:hidden;
}

a.jp-play,
a.jp-pause {
    width:40px;
    height:35px;
    float:left;
    text-indent:-9999px;
    outline:none;
}
 
a.jp-play {
    background: url("../images/jp-controls.png") 0 0 no-repeat;
}
 
a.jp-pause {
    background: url("../images/jp-controls.png") -40px 0 no-repeat;
    display: none;
}
 
.separator {
    background-image:url("../images/separator.png");
    background-repeat:no-repeat;
    width: 2px;
    height: 35px;
    float:left;
    margin-top: 7px;
    margin-right: 10px;
}

.jp-progress {
    background: #706d6d;
 
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
 
    -webkit-box-shadow:
        inset 0px 1px 4px rgba(0,0,0,.4),
        0px 1px 0px rgba(255,255,255,.4);
    -moz-box-shadow:
        inset 0px 1px 4px rgba(0,0,0,.4),
        0px 1px 0px rgba(255,255,255,.4);
    box-shadow:
        inset 0px 1px 4px rgba(0,0,0,.4),
        0px 1px 0px rgba(255,255,255,.4);
 
    width:280px;
    height:10px;
    float:left;
    margin-top: 13px;
}
 
.jp-seek-bar {
    width:0px;
    height:100%;
    cursor: pointer;
}
 
.jp-seeking-bg {
    background:#575555;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
 
.jp-play-bar {
    background: url("../images/play-bar.png") left repeat-x;
    width:0px;
    height:10px;
    position:relative;
    z-index: 9999;
     
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
 
.jp-play-bar span {
    position:absolute;
    top: -3px;
    right: -12px;
 
    width: 16px;
    height: 17px;
}

.jp-current-time,
.jp-duration {
    font-size:11px;
    font-family:Arial;
    color:#f7f7f7;
    margin-top: 10px;
    float:left;
}
.jp-current-time {
    float: left;
    display:inline;
}
.jp-duration {
    float: left;
    display:inline;
    text-align: right;
}
.jp-video .jp-current-time,
.jp-audio .jp-current-time {
    margin-left:10px;
}
.jp-video .jp-duration,
.jp-audio .jp-duration {
    margin-right:10px;
}
.time-sep {
    float:left;
    margin: 10px 3px 0 3px;
 
    font-size:11px;
    font-family:Arial;
    color:#f7f7f7;
}

.jp-video a.jp-mute,
.jp-video a.jp-unmute,
.jp-audio a.jp-mute,
.jp-audio a.jp-unmute {
    text-indent:-9999px;
    float:left;
     
    height: 35px;
    outline:none;
}
 
.jp-mute {
    float:left;
    background: url("../images/jp-controls.png") -80px 0 no-repeat;
    margin-top: 1px;
    margin-left: -10px;
    width: 35px;
}
 
a.jp-unmute {
    background: url("../images/jp-controls.png") -115px 0 no-repeat;
    margin-top: 1px;
    margin-left: -13px;
    display: none;
    width: 38px;
}
 
.jp-volume-bar {
    float:left;
    margin-top: 13px;
    margin-right: 10px;
    overflow:hidden;
    width:70px;
    height:10px;
    cursor: pointer;
 
    background: #706d6d;
 
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
 
    -webkit-box-shadow:
        inset 0px 1px 4px rgba(0,0,0,.4),
        0px 1px 0px rgba(255,255,255,.4);
    -moz-box-shadow:
        inset 0px 1px 4px rgba(0,0,0,.4),
        0px 1px 0px rgba(255,255,255,.4);
    box-shadow:
        inset 0px 1px 4px rgba(0,0,0,.4),
        0px 1px 0px rgba(255,255,255,.4);
}
 
.jp-volume-bar-value {
    width:0px;
    height:10px;
    position: relative;
	
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
 
.jp-volume-bar-value span {
    position:absolute;
    top:0px;
    right:-5px;
 
    width:11px;
    height:10px;
}

.jp-full-screen {
    background: url("../images/jp-controls.png") -150px 0 no-repeat;
    float:left;
    width: 40px;
    height: 35px;
    text-indent:-9999px;
    margin-left: -15px;
    outline:none;
}
 
.jp-restore-screen {
    background: url("../images/jp-controls.png") -185px 0 no-repeat;
    float:left;
    width: 40px;
    height: 35px;
    text-indent:-9999px;
    margin-left: -15px;
    outline:none;
}
a.jp-play,
a.jp-pause,
a.jp-mute,
a.jp-unmute,
a.jp-full-screen,
a.jp-restore-screen {
	opacity:0.8;
	transition:opacity 0.3s;
	-moz-transition:opacity 0.3s;
	-webkit-transition:opacity 0.3s;
	-o-transition:opacity 0.3s;
}
a.jp-play:hover,
a.jp-pause:hover,
a.jp-mute:hover,
a.jp-unmute:hover,
a.jp-full-screen:hover,
a.jp-restore-screen:hover {
	opacity:1;
}



/* @end */

/* @group NO SOLUTION error feedback */

.jp-no-solution {
	position:absolute;
	width:390px;
	margin-left:-202px;
	left:50%;
	top: 10px;

	padding:5px;
	font-size:.8em;
	background-color:#eee;
	border:2px solid #009be3;
	color:#000;
	display:none;
}

.jp-no-solution a {
	color:#000;
}

.jp-no-solution span {
	font-size:1em;
	display:block;
	text-align:center;
	font-weight:bold;
}

/* @end */

/*----------------------------------------------------------------------------
Theme Colours
----------------------------------------------------------------------------*/
.blue{
	background-color:#19A2DE !important;
}
.bluetxt{
	color:#19A2DE !important;
}
.red{
	background-color:#E61400 !important;
}
.redtxt{
	color:#E61400 !important;
}
.green{
	background-color:#319A31 !important;
}
.greentxt{
	color:#319A31 !important;
}
.magenta{
	background-color:#FF0094 !important;
}
.magentatxt{
	color:#FF0094 !important;
}
.purple{
	background-color:#A500FF !important;
}
.purpletxt{
	color:#A500FF !important;
}
.teal{
	background-color:#00AAAD !important;
}
.tealtxt{
	color:#00AAAD !important;
}
.lime{
	background-color:#8CBE29 !important;
}
.limetxt{
	color:#8CBE29 !important;
}
.brown{
	background-color:#9C5100 !important;
}
.browntxt{
	color:#9C5100 !important;
}
.pink{
	background-color:#E671B5 !important;
}
.pinktxt{
	color:#E671B5 !important;
}
.mango{
	background-color:#EF9608 !important;
}
.mangotxt{
	color:#EF9608 !important;
}
.black{
	background-color:#000 !important;
}
.blacktxt{
	color:#565656 !important;
}
.white{
	/* background-color:#ffffff !important; */
}
.whitetxt{
	color:#fff !important;
}

.lintxt{
	color:#cdbfac !important;
}

.greytxt{
	color:#bababa !important;
}
/*----------------------------------------------------------------------------
Position-dependent classes
----------------------------------------------------------------------------*/
.last{
	margin-right:0px;
}
#fancybox-left-ico {
 left:0;
}
#fancybox-right-ico {
 left:0;
}
/*-------------------------Browser Specific CSS-----------------------------*/
noindex:-o-prefocus, #content-title, .page-sub-title h1, .section-title, .widget h5 {
  font-family:'Segoe UI Light' !important;
}
@media all and (-webkit-min-device-pixel-ratio:0) {
	#content-title, .page-sub-title h1, .section-title, .widget h5 {
	  font-family:'Segoe UI Light' !important;
	}
}

/*----------------------------Mobile Version--------------------------------*/
@media all and (max-width:640px) {
	.last{
		margin-right:auto;
	}
}


.web {
	min-height: 430px;
	overflow: hidden;
	margin: 0;
}
.web p {
	color: #bbb;
	z-index: 1000;
	position: absolute;
	left: 154px;
	font-size: 12px;
	top: 10px;
}
.web .mainslide {
	width: 600px;
	top: 40px;
	left: 5px;
}
.web:before {
	background-image: url(../images/browser.png);
	content:'';
	width: 100%;
	height: 430px;
	position: absolute;
	background-repeat: no-repeat;
}


@media only screen and (max-width: 1080px) and (min-width:640px) {
    body {
        /*background-color: lightblue;*/
    }
    #fancybox-wrap {
		left: 3% !important;
	    width: 94% !important;
    }
    .one-third.last h7 {padding-left: 30px;}
    .one-third.last .lb-excerpt {
		color:#bfbfbf;
		padding: 15px 0 15px 30px;
	}
	.one-third.last .toggle-button {
		margin-left: 30px;
	}
	.one-third.last .break {margin-left: 30px;}
}

@media only screen and (max-width: 1440px) and (min-width:1300px) {
	#fancybox-wrap {
		left: 12% !important;
		width: 76% !important;
	}
}


@media only screen and (min-width: 1440px) {
	#fancybox-wrap {
		left: 15% !important;
		width: 70% !important;
	}
}