@import url(https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,latin-ext);
@import url(magnific-popup.css);
@import url(mediaelementplayer.css);
@import url(masterslider.css); 
@import url(style.css);
html, body {
width: 100%;
height: 100%;
overflow:hidden;
margin: 0;
padding: 0;
}

a, p, div{
font-size:3,5vw;
}
h1{font-size:5vw;}
h2{font-size:4vw;}
a{
text-decoration:underline;
color:#666;
}

body {
font-family: 'Roboto', sans-serif;
font-weight: 300;
/*background-image: url('bg.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;*/
background-color: #fff;
box-sizing: border-box;
overflow: hidden;
color:#666;
}
img{vertical-align:middle}

.valogatas{
	float:left;
	text-align:center;
	border:1px #f0f0f0 solid;
	margin:1px;
	width:180px;
	height:170px;
	overflow:hidden;
	padding:0;
}
.valogatas img
{
	margin:0;
	padding:0;
}
.app-bar {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
height: 60px;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
position: fixed;
top: 0;
left: 0;
z-index:2;
}

.app-bar.open {
-webkit-transform: translate(250px,0);
transform: translate(250px,0);
}

.app-bar .logo {
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
font-size: 20px;
line-height: 60px;
margin:4px 4px 0 4px;
color: #fefefe;
float: none;
max-width: none;
}

.app-bar .logo a {
text-decoration: none;
color: inherit;
font-weight: normal;
}
.app-bar .logo a img {
width:100%;float:left	
}
.app-bar-actions  {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.app-bar-actions a img{
width:100%;float:left	
}
.app-bar button, .bottom-bar button {
width: 44px;
height: 44px;

background-image: none;
background-color: transparent;

border-style: solid;
border-radius: 100%;
border-color: rgb(254, 254, 254);

padding: 0;
margin: 8px;

-webkit-transition: border 300ms ease-in,background 300ms ease-in;
transition: border 300ms ease-in,background 300ms ease-in;

-webkit-tap-highlight-color: transparent;
}

.app-bar button img {
width: 28px;
height: 28px;
}

.app-bar button.menu {
position: relative;
}

.app-bar button.menu img {
position: absolute;

top: 7px;
left: 7px;
}

.app-bar button.menu .menu-icon {
opacity: 1.0;
}

.app-bar button.menu .close-icon {
opacity: 0.0;
}

.app-bar.open button.menu .menu-icon {
opacity: 0.0;
}

.app-bar.open button.menu .close-icon {
opacity: 1.0;
}

.app-bar button:hover, .bottom-bar button:hover {
border-color: transparent;
background-color: rgba(254, 254, 254, 0.4);
}

.app-bar button:focus, .bottom-bar button:focus {
border-color: transparent;
outline: 0;
background-color: rgba(254, 254, 254, 0.4);
}

.app-bar button:active, .bottom-bar button:active {
border-color: transparent;
background-color: rgba(254, 254, 254, 0.6);
}

.search {
display: none;

width: 400px;
height: 60px;

padding: 16px;
margin: 0;

box-sizing: border-box;

border: none;
}

.main-content
{
display:block
}

.nano > .nano-content {
position      : absolute; 
overflow      : scroll;
overflow-x    : hidden;
top           : 50px;
right         : 10px;
bottom        : 70px;
left          : 10px;
}
.nano > .nano-content img{
	max-width:100%
}

.nano > .nano-pane > .nano-slider{
  bottom:70px;
}


.nano-content
{
padding:0;
/*margin-right:10px;*/
}
.main-content
{
width:100%;
height:100%;
}

.galcsop a, .galkat a {
	font-size:4vw;
}
.galcsop, .galkat{float:left; width:44%}
/*.galcsop{float:left;margin-right:5px; width:48%}*/
.galkat div, .galcsop div{text-align:center;}
.fancy img{margin-right:2px;}

.bottom-bar {
/*display: -ms-flexbox;
display: -webkit-flex;
display: flex;*/
display:block;

width: 100%;
height: 60px;

-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
text-align:center;
position: fixed;

bottom: 0;
left:0;

background-color: rgba(0,0,0,0.6);
}

.galeria-gyujto{margin-top:2em;overflow:hidden;float:left;/*margin-right:1em*/}
.galeria-gyujto a{
	box-sizing:border-box;
	background-color:transparent;	
	-webkit-transition:0.5s ease-in;	
	-moz-transition:0.5s ease-in;	
	-ms-transition:0.5s ease-in;	
	-o-transition:0.5s ease-in;	
	transition:0.5s ease-in;
}
.galeria-belul .galeria-kocka{
	overflow:hidden;
	background:rgba(255,255,255,0);
	position:relative
}
.galeria-belul .galeria-kocka img {
    -moz-transition: border-radius 400ms ease 0s;
    -o-transition: border-radius 400ms ease 0s;
    -webkit-transition: border-radius 400ms ease 0s;
    -ms-transition: border-radius 400ms ease 0s;
    transition: border-radius 400ms ease 0s;
    transform-origin: center center;
    -ms-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    border-radius: 0;
}
.galeria-fokep{display:block;max-width:100%;height:auto}
.galeria-kocka .galeria-wrap{
	background: rgba(42, 42, 42, 0.59);
	position: absolute;
    top: auto;
    left: auto;
    right: auto;
	opacity: 0;
    padding: 8px;
    -moz-transition: opacity 400ms ease 0s, -moz-transform 400ms ease 0s, border-radius 400ms ease 0s;
    -o-transition: opacity 400ms ease 0s, -o-transform 400ms ease 0s, border-radius 400ms ease 0s;
    -webkit-transition: opacity 400ms ease 0s, -webkit-transform 400ms ease 0s, border-radius 400ms ease 0s;
    -ms-transition: opacity 400ms ease 0s, -ms-transform 400ms ease 0s, border-radius 400ms ease 0s;
    transition: opacity 400ms ease 0s, transform 400ms ease 0s, border-radius 400ms ease 0s;
    -moz-transform: scale(0,0) perspective(400px) rotateX( 0deg ) rotateY( 360deg ) rotateZ( 0deg );
    -o-transform: scale(0,0) perspective(400px) rotateX( 0deg ) rotateY( 360deg ) rotateZ( 0deg );
    -webkit-transform: scale(0,0) perspective(400px) rotateX( 0deg ) rotateY( 360deg ) rotateZ( 0deg );
    -ms-transform: scale(0,0) perspective(400px) rotateX( 0deg ) rotateY( 360deg ) rotateZ( 0deg );
    transform: scale(0,0) perspective(400px) rotateX( 0deg ) rotateY( -360deg ) rotateZ( 0deg );
    transform-origin: center center;
    -ms-transform-origin: center center;
    -moz-transform-origin: center center;
    -o-transform-origin: center center;
    -webkit-transform-origin: center center;
    bottom: auto;
}
.galeria-kocka .galeria-felirat{
	background: rgba(16, 21, 93, 0.72);
    text-align: center;
    border-radius: 0;
	padding: 2em;
    overflow: hidden;
	height:100%
}
.galeria-kocka .galeria-felirat h3{
	font-size: 1em;
    color: #e8e8e8;
    text-transform: uppercase;
    padding: .3em 0;
    border-top: 1px solid;
    border-bottom: 1px solid;
    margin-top: 0.5em;
    margin-bottom: 1em;
}
.galeria-kocka .galeria-felirat p{
	line-height: 1.2em;
    color: #fff;
	font-size:1.0em
}
.galeria-belul .galeria-kocka:hover .galeria-wrap{
	opacity: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    -moz-transform: scale(1,1) perspective(400px) rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg );
    -o-transform: scale(1,1) perspective(400px) rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg );
    -webkit-transform: scale(1,1) perspective(400px) rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg );
    -ms-transform: scale(1,1) perspective(400px) rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg );
    transform: scale(1,1) perspective(400px) rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg );
}
.galeria-belul .galeria-kocka:hover .galeria-wrap .galeria-pics{position:sticky;bottom:1em;padding-right:1em;display:inline-block;float:right;overflow:hidden;color:#fff}
.scrollup {
    opacity:0.4;
	width:39px;
	height:40px;
    position:fixed;
    bottom:11px;
	float:right;
	right:11px;
    /*left:50px;*/
    display:none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: 6px; 
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	float:left;
	color: #aaa;
	border: solid 1px #b7b7b7;
	background:#fafafa;
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#fafafa));
	background: -moz-linear-gradient(top,  #000,  #fafafa);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#fafafa'); 
	background:#fff url(fel.png) no-repeat top left;
}
.scrollup:hover{opacity: 1;}
@media only screen and (max-width: 799px){
	.grid-portfolio .gp-item{
		width:25%
	}
	.horizontal-folio .gp-item a{
		width:280px;
	}
	.app-bar .logo a img {
		width:45%	
	}
}
@media only screen and (max-width: 625px){
	.app-bar .logo a img {
		width:60%	
	}
}
@media only screen and (max-width: 505px){
	.app-bar .logo a img {
		width:77%	
	}
}
@media only screen and (max-width: 405px){
	.app-bar .logo a img {
		width:94%	
	}
}

@media all and (max-width: 320px) {
.galcsop, .galkat{float:left; width:43%;}
.galkat div, .galcsop div{text-align:center;}
.fancy img{margin-right:2px;}
.app-bar-actions {
margin: 5px 0;
}
.app-bar-actions a img{
width:80%;	
}
.app-bar .logo a img {
width:100%	
}
}

@media all and (min-width: 800px) {
body {
padding: 16px;
}
.nano > .nano-pane > .nano-slider {
  bottom:170px;
}
.app-bar {
display: block;
position: initial;
height: 60px;
padding: 0 16px;
margin-bottom: 16px;
box-sizing: border-box;
background-color: transparent;
-webkit-transform: translate(0,0);
transform: translate(0,0);
-webkit-transition: none;
transition: none;
}
.app-bar.open {
-webkit-transform: translate(0,0);
transform: translate(0,0);
}

.app-bar .logo {
float: left;
margin: 0;
font-size: 80px; 
line-height: 10px;
}
.app-bar-actions {
float: right;
margin: 0;
}

.app-bar:after {
content: ' ';

display:block;
height: 0;
overflow: hidden;

clear: both;
}

.search {
display: block;

padding-left: 16px;
}

button.menu {
display: none;
}

a, p, div{
font-size:16px;
}
h1{font-size:20px;}
h2{font-size:16px;}

.nano > .nano-content {
position      : absolute;
overflow      : scroll;
overflow-x    : hidden;
top           : 0;
right         : 0;
bottom        : 170px;
left          : 0;
}
.main-content
{
display:block;
width:100%;
margin:0;
padding:0;
}

.nano-content {
padding:0 20px;
/*display:inline-block;position:absolute;top:20%;right:0;bottom:60px;left:0;width:100%;height:100%;overflow:hidden;background-color:yellow;*/
}
/*
.nano {
width:100px;
height:10px;
overflow:hidden;
float:left;
background-color:red;
}

.nano-content {
width:80px;
height:5px;

overflow:hidden;
display:none;
}*/
.bottom-bar {


/*display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;*/
display:block;
/*width: auto;
height: auto;*/


/*position: initial;*/

/*float: left;*/
/*margin-top: 16px;*/

background-color: rgba(0,0,0,0.6);

}
}

.navdrawer-container {
position: fixed;

width: 250px;
height: 100%;

background-color: #a1a1a1;

color: #333;

-webkit-transform: translate(-250px,0);
transform: translate(-250px,0);

z-index: 2;
}

.navdrawer-container.open {
-webkit-transform: translate(0,0);
transform: translate(0,0);
}

.navdrawer-container ul {
list-style-type: none;
}

.navdrawer-bg {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: black;

/** Unfortunately this is the best way
to get no paints in Chrome **/
opacity: 0.0000001;

z-index: 1;

pointer-events: none;
}

.navdrawer-bg.open {
opacity: 0.5;
}

.app-bar, .navdrawer-container {
-webkit-transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}

.navdrawer-bg {
-webkit-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}

.navdrawer-container ul li a {
display: block;
height: 60px;
padding: 0 20px;
line-height: 60px;
text-decoration: none;
color: #000;
}

.navdrawer-container ul li a:hover {
/*background-color: rgba(255, 255, 255, 0.2);*/
background-color:#ccc;
color: #fff;
}

.navdrawer-container ul li a:focus {
background-color: rgba(255, 255, 255, 0.3);
outline: 0;
}

.navdrawer-container ul li a:active {
background-color: rgba(255, 255, 255, 0.4);
}

.navdrawer-container ul li ul{
position:fixed;
top:0;
width:200px;
overflow:hidden;
display:table-cell;
}
.navdrawer-container ul li ul li{
height:30px;
overflow:hidden;
}
.navdrawer-container ul li ul li a{
line-height:30px;
}



@media all and (min-width: 800px) {
.navdrawer-container {
position: initial;
width: 100%;
height: auto;
-webkit-transform: translate(0,0);
transform: translate(0,0);
-webkit-transition: none;
transition: none;
pointer-events: auto;
}

.navdrawer-container ul {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}

.navdrawer-container ul li {
border: none;
}

.navdrawer-bg, .navdrawer-bg.open {
opacity: 0;

pointer-events: none;
}

/*.galkat{float:left;margin-right:5px; width:16%}*/
.galcsop a, .galkat a{font-size:20pt;}
.galcsop, .galkat{float:left; width:30%}
/*.galcsop{float:left;margin-right:6px; width:32%}*/
.galcsop div, .galkat div{text-align:center;}
.fancy img{margin-right:2px; }


}

.promote-layer {

margin:0;

/*
This may promote the layer to a composited
layer.

Replace with will-change when available

#perfmatters
*/
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.keplista
{
	margin:0;
	padding:0;
}

form label{display:inline-block; font-weight:normal;font-size:14px;margin:0px;padding:0px; width:200px; overflow:hidden; vertical-align:top}
input,textarea,select{padding:5px 0;border:1px solid #9f9f9f; margin:1px 0; box-shadow:1px 1px 2px 0px #e5e5e5;-moz-box-shadow:1px 1px 2px 0px #e5e5e5;-webkit-box-shadow:1px 1px 2px 0px #e5e5e5;color:#777777;}
.inpu{width:195px;}
.lin{text-align:left; border-top:1px solid #ebebeb; padding:2px 0}
/*.button{ width:auto; padding:5px 10px; color:#000}*/
.lin label, .lin div{ display:inline-table}
.lin div{ width:200px;}
/*.fancy{margin-right:4px;}*/

.button{background:#333;overflow:hidden;color:#fff;border:0;cursor:pointer;padding:4px 20px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;line-height:20px;font-size:16px;text-transform:uppercase}
.button:hover{background:#a1a1a1;color:#333}
.button a:hover{color:#333}

.galcsop, .galkat {  
    border: 5px solid #fff;  
    overflow: hidden;  
    -webkit-box-shadow: 1px 1px 1px 1px #ccc;  
    -moz-box-shadow: 1px 1px 1px 1px #ccc;  
    box-shadow: 1px 1px 1px 1px #ccc;
	margin:5px;
}  
  /*
.galkat img {  
    position: absolute;  
    left: 0;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
}  
*/

.galcsop a, .galkat a {
	text-decoration:none;
}

.galcsop span, .galkat span {  
	position:relative;
    color: #000;  
    z-index: 1;
    left: 0;
    height: 30pt;  
    width: 100%;  
    display: block;  
    line-height: 30pt;
    text-align: center;
}

.horizontal-folio .gp-item{
	height: 100%;
	margin-right: 5px;
}
.horizontal-folio .gp-item a{
	display: block;
	overflow: hidden;
	position: relative;
	height: 100%;
	width: 350px;
}
.horizontal-folio .gp-item img{
	height: 100%;
	width: auto;
}
.full-height .gp-item{
	height: 100%;
	float: left;
}
.gp-item{  	        
	overflow: hidden;
	position: relative;
}
.gp-item a {
	display: block;
}

.grid-portfolio .gp-item{
	float: left;
	width: 20%;
	margin: 0;
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	transition-property: transform, opacity;
}

.grid-portfolio .gp-item a{
	position: relative;
	overflow: hidden;
	display:block;
}

.grid-portfolio .gp-item img{
	width:100%;
}
.grid-portfolio .gp-item a:after{
	border: 3px solid #fdfdfd;
    content: "";
    position: absolute;
	top: 0px;
	bottom: 0;
	left: 0;
	right: 0;
}
.dark-template .grid-portfolio .gp-item a:after{
	border-color: #1c1c1c;
}
.gp-item.tj-hover-5:after,
.gp-item.tj-hover-1:after,
.gp-item.tj-hover-2:after{
	right:3px;
	left:3px;
	top:3px;
	bottom:3px;
	width:auto;
	height: auto;
}

.grid-portfolio.no-padding .gp-item a:after{
	border: none;
}
.grid-portfolio.no-padding .gp-item.tj-hover-5:after,
.grid-portfolio.no-padding .gp-item.tj-hover-1:after,
.grid-portfolio.no-padding .gp-item.tj-hover-2:after{
	right:0px;
	left:0px;
	top:0px;
	bottom:0px;
}
/* Hover effects
 **************************************************/
.tj-overlay {
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
}
.tj-hover-1,.tj-hover-2,.tj-hover-3,.tj-hover-4,.tj-hover-5{
	position: relative;
	display: block;
}
.tj-hover-1> a,.tj-hover-2> a,.tj-hover-3> a,.tj-hover-4> a,.tj-hover-5> a{
	display: block;
}

.tj-hover-1 .tj-overlay,
.tj-hover-2 .tj-overlay,
.tj-hover-3 .tj-overlay,
.tj-hover-4 .tj-overlay,
.tj-hover-5 .tj-overlay
{

	-webkit-transition: all 0.5s ease;
	   -moz-transition: all 0.5s ease;
	    -ms-transition: all 0.5s ease;
	     -o-transition: all 0.5s ease;
	        transition: all 0.5s ease;
}

.tj-hover-1 .tj-overlay:after{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0px;
	display: block;
	height: 4px;
	background: rgb(250, 15, 31);
	z-index: 5;
	margin-top: -2px;

	-webkit-transition: all 0.3s ease-in;
	   -moz-transition: all 0.3s ease-in;
	    -ms-transition: all 0.3s ease-in;
	     -o-transition: all 0.3s ease-in;
	        transition: all 0.3s ease-in;
}

.tj-hover-1 .tj-overlay .title{
	font-size:20px;
	margin-top: -40px;
	-webkit-transform: translate3d(0,-10px,0);
	   -moz-transform: translate3d(0,-10px,0);
	    -ms-transform: translate3d(0,-10px,0);
	     -o-transform: translate3d(0,-10px,0);
	        transform: translate3d(0,-10px,0);
	text-transform: uppercase;
}
.tj-hover-1 .tj-overlay .subtitle{

	margin-top: 23px;
	-webkit-transform: translate3d(0,15px,0);
	   -moz-transform: translate3d(0,15px,0);
	    -ms-transform: translate3d(0,15px,0);
	     -o-transform: translate3d(0,15px,0);
	        transform: translate3d(0,15px,0);
	font-size: 13px;
	font-family: 'ralewayregular';
	font-weight: 400;
}

.tj-hover-1:hover .tj-overlay{
	opacity: 1;
}

.tj-hover-1:hover .tj-overlay:after{
	width: 40px;
	margin-left: -20px;
}


.tj-hover-1:hover .tj-overlay .title,
.tj-hover-1:hover .tj-overlay .subtitle,
.tj-hover-2:hover .tj-overlay .overlay-texts,
.tj-hover-2:hover .tj-overlay .overlay-icon,
.tj-hover-4:hover .tj-overlay .overlay-icon{
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	   -moz-transform: translate3d(0,0,0);
	    -ms-transform: translate3d(0,0,0);
	     -o-transform: translate3d(0,0,0);
	        transform: translate3d(0,0,0);
}

.tj-hover-1 .tj-overlay .title,
.tj-hover-1 .tj-overlay .subtitle,
.tj-hover-2 .tj-overlay .overlay-texts,
.tj-hover-2 .tj-overlay .overlay-icon{
	color:#000;
	width: 100%;
	padding:0 15px;
	text-align: center;
	position: absolute;
    top:50%;
	left: 0;
	opacity: 0;

	-webkit-transition: -webkit-transform 0.6s ease,opacity 0.3s ease;
	   -moz-transition:  	moz-transform 0.6s ease,opacity 0.3s ease;
	    -ms-transition: 	-ms-transform 0.6s ease,opacity 0.3s ease;
	     -o-transition: 	 -o-transform 0.6s ease,opacity 0.3s ease;
	        transition: 		transform 0.6s ease,opacity 0.3s ease;
      
}

.tj-hover-1:after,
.tj-hover-2:after,
.tj-hover-4:after,
.tj-hover-5:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	-webkit-transition: opacity 0.5s ease;
	   -moz-transition: opacity 0.5s ease;
	    -ms-transition: opacity 0.5s ease;
	     -o-transition: opacity 0.5s ease;
	        transition: opacity 0.5s ease;
}
.tj-hover-1:after{
	background: #fff;
	opacity: 0;
}
.tj-hover-2:after{
	background: #000;
	opacity: 0.5;
}

.tj-hover-4:after{
	background: #000;
	opacity: 0;
}

.tj-hover-1:hover:after{
	opacity: 0.75;
}
.tj-hover-2:hover:after{
	opacity: 0.1;
}
.tj-hover-4:hover:after{
	opacity: 0.3;
}
.tj-hover-2 .tj-overlay .overlay-icon{
	margin-top: -45px;
	margin-left: -13px;
	left:50%;
	width: 35px;
	height: 35px;
	border: 1px solid #fff;
	border-radius:50%;
	text-align: center;
	line-height: 34px;
	color: #fff;
	font-size: 16px;
	box-shadow: 1px 1px 3px -1px #000, inset 1px 1px 3px -1px #000;
	text-shadow: 1px 1px 2px #000;

	-webkit-transform: translate3d(10px,0,0);
	   -moz-transform: translate3d(10px,0,0);
	    -ms-transform: translate3d(10px,0,0);
	     -o-transform: translate3d(10px,0,0);
	        transform: translate3d(10px,0,0);
}

.tj-hover-2 .tj-overlay .overlay-texts{
	margin-top: 15px;
	text-align: center;
	color:#fff;

	-webkit-transform: translate3d(-20px,0,0);
	   -moz-transform: translate3d(-20px,0,0);
	    -ms-transform: translate3d(-20px,0,0);
	     -o-transform: translate3d(-20px,0,0);
	        transform: translate3d(-20px,0,0);
}
.tj-hover-2 .tj-overlay .title{
	font-size: 20px;
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 2px;
	text-shadow: 1px 1px 2px #000;
	color:#fff;
}

.tj-hover-2 .tj-overlay .subtitle{
	font-size: 12px;
	margin: 5px 0 0 0;
	letter-spacing: 1px;
	text-shadow: 1px 1px 2px #000;
	font-weight: 400;
	color:#fff;
}

.tj-hover-2:hover .tj-overlay{
	opacity: 1;
}

.tj-hover-3 .tj-overlay{
	opacity: 1;
	background: rgba(0,0,0,0.5);
}
.tj-hover-3:hover .tj-overlay,
.tj-hover-3:focus .tj-overlay{
	background: rgba(0,0,0,0.3);
}
.tj-hover-3 .tj-overlay .overlay-texts{
	padding:0 5%;
}
.tj-hover-3 .tj-overlay .title{
	font-size: 22px;
	text-transform: uppercase;
	margin: 0;
	margin-bottom: 30px;
	letter-spacing: 2px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	font-weight: 700;
	font-family: 'ralewaybold';
	position: relative;
	color:#d0d0d0;
	-webkit-transition: all 0.25s ease;
	   -moz-transition: all 0.25s ease;
	    -ms-transition: all 0.25s ease;
	     -o-transition: all 0.25s ease;
	        transition: all 0.25s ease;
}
.tj-hover-3 .tj-overlay .title:after{
	content: '';
	position: absolute;
	bottom:-15px;
	left:0;
	height: 5px;
	background-color: #dc971f; 
	width: 30px;
	-webkit-transition: all 0.25s ease;
	   -moz-transition: all 0.25s ease;
	    -ms-transition: all 0.25s ease;
	     -o-transition: all 0.25s ease;
	        transition: all 0.25s ease;
}
.tj-hover-3 .tj-overlay .subtitle{
	font-size: 12px;
	margin: 5px 0 0 0;
	letter-spacing: 1px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	font-weight: 400;
	color: #fff;
}
.tj-hover-3:hover .tj-overlay .title,
.tj-hover-3:focus .tj-overlay .title{
	color:#f1f1f1;
}
.tj-hover-3:hover .tj-overlay .title:after,
.tj-hover-3:focus .tj-overlay .title:after{
	width: 40px;
	position: absolute;
	/* top:50%; */
}

.tj-hover-4 .tj-overlay{
	opacity: 0;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.tj-hover-4:hover .tj-overlay{
	opacity: 1;
}
.tj-hover-4 .tj-overlay .overlay-icon{
	position: absolute;
	margin-left: -20px;
	margin-top: -20px;
	left: 50%;
	top: 50%;
	width: 40px;
	height: 40px;
	border: 1px solid #fff;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	line-height: 40px;
	font-size: 13px;

	-webkit-transform: translate3d(0,-15px,0);
	   -moz-transform: translate3d(0,-15px,0);
	    -ms-transform: translate3d(0,-15px,0);
	     -o-transform: translate3d(0,-15px,0);
	        transform: translate3d(0,-15px,0);

	-webkit-transition: all 0.4s ease;
	   -moz-transition: all 0.4s ease;
	    -ms-transition: all 0.4s ease;
	     -o-transition: all 0.4s ease;
	        transition: all 0.4s ease;

	box-shadow: 1px 1px 3px -1px #000, inset 1px 1px 3px -1px #000;
	text-shadow: 1px 1px 2px #000;
}
.tj-hover-5{
	overflow: hidden;
}
.tj-hover-5:after{
	background: #000;
	opacity: 0;
	z-index: 1;
}


.tj-hover-5 .tj-overlay:before,.tj-overlay:after{
	content: '';
	position: absolute;
	top:50%;
	left:50%;
	background: #fff;
}
.tj-hover-5 .tj-overlay:before{
	width: 40px;
	height: 1px;
	margin-left: -20px;
	margin-top: -1px;
}
.tj-hover-5 .tj-overlay{

	-webkit-transition: all 0.6s ease;
	   -moz-transition: all 0.6s ease;
	    -ms-transition: all 0.6s ease;
	     -o-transition: all 0.6s ease;
	        transition: all 0.6s ease;

	-webkit-transform: translate3d(0,-10px,0);
        -moz-transform: translate3d(0,-10px,0);
         -ms-transform: translate3d(0,-10px,0);
          -o-transform: translate3d(0,-10px,0);
             transform: translate3d(0,-10px,0);     
	

	z-index: 2;

}
.tj-hover-5 img{
	-webkit-transition: all 0.3s ease;
	   -moz-transition: all 0.3s ease;
	    -ms-transition: all 0.3s ease;
	     -o-transition: all 0.3s ease;
	        transition: all 0.3s ease;
}
.tj-hover-5 .tj-overlay:after{
	width: 1px;
	height: 40px;
	margin-left: -1px;
	margin-top: -20px;
}
.tj-hover-5:hover:after{
	opacity: 0.8;
}
.tj-hover-5:hover .tj-overlay{
	opacity: 1;
	-webkit-transform: translate3d(0,0px,0);
        -moz-transform: translate3d(0,0px,0);
         -ms-transform: translate3d(0,0px,0);
          -o-transform: translate3d(0,0px,0);
             transform: translate3d(0,0px,0); 
}
.tj-hover-5:hover img{
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);
}
.tj-hover-5.reverse:after{
	background: #fff;
}
.tj-hover-5.reverse .tj-overlay:after,
.tj-hover-5.reverse .tj-overlay:before{
	background: #000;
}
.tj-hover-5.colorbg:after{
	background: #dc971f;
}