/*** image box   ***/
.box .image_box 			{width: 100%; height: auto; display: inline-block; margin-right: 5px; padding: 0; list-style: none; /*float:left;*/}
.image_box figure img 		{display: block; opacity: 1; background-color: #fff; }
/*bizonyos felbontásoknál 1px hibázot*/
.image_box figure 			{position: relative;}

/*--------------------------------------------------------------------------------------*/
/* image circe effect */
.box_circle,
.box_circle figure,
.box_circle figure::before,
.box_circle figure img,
.box_circle .caption,
.box_circle .caption_background,
.box_circle.rotation-effect .spinner {
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-o-border-radius:50%;
	-ms-border-radius:50%;
    -khtml-border-radius: 50%;
}

.box_circle {
	position: relative; 
	position: relative; width: 100%; height: 100%;
	overflow: hidden;
	/*transition: all 0.35s ease-in-out 0s;*/
	}
.box_circle, 
.box_circle * 	{	box-sizing: border-box;}
.box_circle a 	{color: #fff!important; text-decoration: none;}
.box_circle figure {
	position: relative;
	width: -webkit-calc(100% - 7px);	height: -webkit-calc(100% - 7px);	
	width: -ms-calc(100% - 7px);		height: -ms-calc(100% - 7px);	
	width: -moz-calc(100% - 7px);		height: -moz-calc(100% - 7px);	
	width: -o-calc(100% - 7px);		height: -o-calc(100% - 7px);	
	width: calc(100% - 7px);			height: calc(100% - 7px); 
}
.box_circle figure::before {
	box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
	content: "";
	display: block;
	position: absolute;
	width: 100%; height: 100%;
	
	-webkit-transition: all 0.35s ease-in-out 0s;
    -moz-transition: all 0.35s ease-in-out 0s;
	-o-transition: all 0.35s ease-in-out 0s;
    -ms-transition: all 0.35s ease-in-out 0s;
    transition: all 0.35s ease-in-out 0s;	
}
/*Kép*/
.box_circle figure img {
	width: -webkit-calc(100% - 7px);	height: -webkit-calc(100% - 7px);	
	width: -ms-calc(100% - 7px);		height: -ms-calc(100% - 7px);	
	width: -moz-calc(100% - 7px);		height: -moz-calc(100% - 7px);	
	width: -o-calc(100% - 7px);		height: -o-calc(100% - 7px);	
	width: calc(100% - 7px);			height: calc(100% - 7px); 
}
.box_circle .caption,
.box_circle .caption_background{
	backface-visibility: hidden;
	position: absolute;
	top: 0; bottom: 0;	left: 0; right: 0;
	text-align: center;
}
.box_circle.rotation-effect .spinner {
	border: 7px solid;
	width: 100%;	height: 100%;
	transition: all 1.5s ease-in-out 0s;
}

.box_circle.rotation-effect figure {
	position: absolute;
	bottom: 0;	left: 7px; right: 0; top: 7px;
	width: auto; 	height: auto;
}
.box_circle.rotation-effect figure::before {display: none;}

/*Sötét effect háttér*/
.box_circle.rotation-effect .caption{
	/* átrakva function.php - beállítás tinymce-editor.js*/
	/*background: rgba(72, 73, 65, 0.8) none repeat scroll 0 0; */
	opacity: 0;
	bottom: -1px;	left: 6px;	right: -1px; top: 6px;
	transition: all 1.2s ease-in-out 0s;
	width: -webkit-calc(100% - 12px);	height: -webkit-calc(100% - 12px);	
	width: -ms-calc(100% - 12px);		height: -ms-calc(100% - 12px);	
	width: -moz-calc(100% - 12px);		height: -moz-calc(100% - 12px);	
	width: -o-calc(100% - 12px);		height: -o-calc(100% - 12px);	
	width: calc(100% - 12px);			height: calc(100% - 12px);
}

.box_circle.rotation-effect .caption h3 {
	color: #fff;
	font-size: 1.2em!important;
	letter-spacing: 1px;
	padding: 30% 0 15px;
	margin: 0 10%;
	position: relative;
	text-transform: uppercase;
	text-align: center;
}
.box_circle.rotation-effect .caption p {
	border-top: 1px solid rgba(255, 255, 255, 1);
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	margin: 0 7%;
	padding: 14px 5px 10px;
}
/* átrakva function.php - beállítás tinymce-editor.js*/
/* border-color:#e3e4e4; border-right-color:#c6c7c8; border-bottom-color:#c6c7c8; */
.box_circle.rotation-effect .spinner {
	-webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}	
.box_circle.rotation-effect a:hover .spinner {
	-webkit-transform: rotate(765deg);
    -moz-transform: rotate(765deg);
    -o-transform: rotate(765deg);
    -ms-transform: rotate(765deg);
    transform: rotate(765deg);
	border: 7px solid #88898b!important;
}
.box_circle.rotation-effect a:hover .caption {opacity: 1;}
.box_circle .caption {background: rgba(0, 0, 0, 0) none repeat scroll 0 0;	margin: 0;	padding: 0;}


/*--------------------------------------------------------------------------------------*/

.image_box figure.box_below_effect figcaption 	{color: #fff;	/*font-variant:small-caps;*/ text-transform: uppercase;	text-align: left;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;	bottom: 0;	left: 0;}
.image_box figure.box_below_effect figcaption p	{font-size: 0.8em;}
.image_box figure.box_below_effect figcaption::before,
.image_box figure.box_below_effect figcaption::after {pointer-events: none;}
.image_box figure.box_below_effect figcaption h4 {font-size: 1em; overflow: hidden;}
.image_box figure.box_below_effect figcaption,
/*Nyomógombként fog viselkedni, a kép (el lett teljesen tüntetve a link)*/
.image_box figure figcaption > a {position: absolute;	top: 0;	left: 0;	width: 100%;	height: 100%;}
.image_box figure figcaption > a {z-index: 1000;	text-indent: 200%;	white-space: nowrap;	font-size: 0;	opacity: 0;} 

.image_box figure.box_below_effect h4 span{font-weight: bold;}
.image_box figure.box_below_effect h4,
.image_box figure.box_below_effect p	{margin: 0 0 0.5em 0;}
.image_box figure.box_below_effect p 	{/*white-space: nowrap;*/ overflow: hidden;}

/*--------------------------------------------------------------------------------------*/
/* box_below_effect */
figure.box_below_effect 	{background-color: #fff; overflow: hidden;}
figure.box_below_effect img 	{max-width: /*365px;*/ 100%;	height: auto;
	width: -webkit-calc(100% + 30px);	
	width: -ms-calc(100% + 30px);	
	width: -moz-calc(100% + 30px);	
	width: -o-calc(100% + 30px);	
	width: calc(100% + 30px);
	min-width: -webkit-calc(100% + 30px);	
	min-width: -ms-calc(100% + 30px);	
	min-width: -moz-calc(100% + 30px);	
	min-width: -o-calc(100% + 30px);	
	min-width: calc(100% + 30px);	
}
figure.box_below_effect figcaption {padding: 15px;}
figure.box_below_effect figcaption .text_box{position: absolute;	top: 50%;	left: 0px; margin: 0 15px; 	max-height: 50%;}
figure.box_below_effect figcaption::before {
	position: absolute;	content: '';	opacity: 0;
	max-height: 50%;
	top: 0; right: 0; bottom: 0; left: 0;
	background-color: rgba(198,199,200, 0.7);	
	-webkit-transform: translate3d(-999px,85%,0);
	-ms-transform: translate3d(-999px,85%,0);
	-moz-transform: translate3d(-999px,85%,0);
	-o-transform: translate3d(-999px,85%,0);
	transform: translate3d(-999px,85%,0);	
/*	margin-bottom: 15px;*/
}
figure.box_below_effect h4 	{
	opacity: 0;
	color: #fff;	
	-webkit-transition: -webkit-transform 0.5s;
    -ms-transition: -ms-transform 0.5s;
	-moz-transition: -moz-transform 0.5s;
	-o-transition: -o-transform 0.5s;
	transition: transform 0.5s;
	margin: 0;	padding: 0;
	
	-webkit-transform: translate3d(-999px,0,0);
	-ms-transform: translate3d(-999px,0,0);
	-moz-transform: translate3d(-999px,0,0);
	-o-transform: translate3d(-999px,0,0);
	transform: translate3d(-999px,0,0);	
}
figure.box_below_effect img{
	-webkit-transform: translate3d(-25px,0,0);
	-ms-transform: translate3d(-25px,0,0);
	-moz-transform: translate3d(-25px,0,0);
	-o-transform: translate3d(-25px,0,0);
	transform: translate3d(-25px,0,0);
}
figure.box_below_effect p 	{
	text-transform: none;
	opacity: 0;
	-webkit-transform: translate3d(0,-999px,0);
	-ms-transform: translate3d(0,-999px,0);
	-moz-transform: translate3d(0,-999px,0);
	-o-transform: translate3d(0,-999px,0);
	transform: translate3d(0,-999px,0);
	line-height: 1.5;}
figure.box_below_effect img,
figure.box_below_effect figcaption::before,
figure.box_below_effect p{
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    -ms-transition: opacity 0.35s, -ms-transform 0.35s;
	-moz-transition: opacity 0.35s, -moz-transform 0.35s;
	-o-transition: opacity 0.35s, -o-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}
figure.box_below_effect:hover img 		{
	opacity: 0.5;
	/*-webkit-filter: blur(1px);
	filter: blur(1px);*/
	
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
/* .post figure.box_below_effect:hover img 	{opacity: 0;	-webkit-transform: translate3d(500px,0,0);	transform: translate3d(500px,0,0);}*/
figure.box_below_effect:hover figcaption::before{	
	opacity: 1;		
	-webkit-transform: translate3d(0,85%,0);
	-ms-transform: translate3d(0,85%,0);
	-moz-transform: translate3d(0,85%,0);
	-o-transform: translate3d(0,85%,0);
	transform: translate3d(0,85%,0);		
}
figure.box_below_effect:hover h4,
figure.box_below_effect:hover p  {
	opacity: 1;		
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.box_below_effect:hover figcaption::before,
figure.box_below_effect:hover h4,
figure.box_below_effect:hover p,
figure.box_below_effect:hover img {
	-webkit-transition-delay: 0.2s;	
	-ms-transition-delay: 0.2s;	
	-moz-transition-delay: 0.2s;	
	-o-transition-delay: 0.2s;	
	transition-delay: 0.2s;
}

/*--------------------------------------------------------------------------------------*/
/* image square effect */
.box_square, .box_square * 	{box-sizing: border-box;}
.box_square a 				{color: #333;}
.box_square a:hover 		{text-decoration: none;}
.box_square img 			{height: 100%;	width: 100%;}
.box_square figure			{overflow: hidden;}
/* width 360 - height 202 16:9 arány*/

.box_square {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    height: auto;
	max-height: 202px;
    position: relative;
    width: 360px;
}

.box_square.compressed{
    height: auto;
	max-height: 360px;
    width: 202px;
}
.box_square.colored {
    -moz-box-shadow: 	1px 1px 3px 0px rgba(198, 199, 200, 0.3);
	-webkit-box-shadow: 1px 1px 3px 0px rgba(198, 199, 200, 0.3);
	box-shadow: 		1px 1px 3px 0px rgba(198, 199, 200, 0.3);
}

.box_square .box_info {
    backface-visibility: hidden;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}

/*--------------------------------------------------------------------------------------*/
.box_square.effect3 {overflow: hidden; background: #d40e1e;}
.box_square.effect3.colored .box_info {background: rgba(212, 14, 30, 0.6) none repeat scroll 0 0;}
.box_square.effect3 .img {
	-webkit-transform:  translateY(0px);
    -moz-transform:  translateY(0px);
    -o-transform:  translateY(0px);
    -ms-transform:  translateY(0px);
	transform: translateY(0px);
	
	-webkit-transition: all 0.35s ease-in-out 0s;
    -moz-transition: all 0.35s ease-in-out 0s;
	-o-transition: all 0.35s ease-in-out 0s;
    -ms-transition: all 0.35s ease-in-out 0s;
    transition: all 0.35s ease-in-out 0s;	
}
.box_square.effect3 .box_info {
    background: rgba(77, 40, 26, 1) none repeat scroll 0 0;
    height: 75px;
    opacity: 0;
	-webkit-transition: all 0.35s ease-in-out 0s;
    -moz-transition: all 0.35s ease-in-out 0s;
	-o-transition: all 0.35s ease-in-out 0s;
    -ms-transition: all 0.35s ease-in-out 0s;
    transition: all 0.35s ease-in-out 0s;
}
.box_square.effect3 .box_info h4 {
    color: #fff;
    font-size: 13px;
    margin: 4px 0 0;
    padding: 10px 10px 0 4px;
    text-align: center;
    text-transform: uppercase;
}
.box_square.effect3.colored a:hover .box_info h4 span{text-decoration: none; color: #fff;}
.box_square.effect3 .box_info p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-style: italic;
    padding: 5px;
    position: relative;
    text-align: center;
}

.box_square.effect3 a:hover .box_info {opacity: 1; visibility: visible;}
.box_square.effect3.bottom_to_top .box_info {
	top: auto; 
	-webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -ms-transform: translateY(100%);
	transform: translateY(100%);
}
.box_square.effect3.bottom_to_top a:hover .img {
	-webkit-transform: translateY(-75px);
    -moz-transform: translateY(-75px);
    -o-transform: translateY(-75px);
    -ms-transform: translateY(-75px);
	transform: translateY(-75px);
	opacity: 0.5;
}
.box_square.effect3.bottom_to_top a:hover .box_info,
.box_square.effect3.top_to_bottom a:hover .box_info {
	-webkit-transform:  translateY(0px);
    -moz-transform:  translateY(0px);
    -o-transform:  translateY(0px);
    -ms-transform:  translateY(0px);
	transform: translateY(0px);
}
.box_square.effect3.top_to_bottom .box_info {
	bottom: auto; 
	-webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);	
	transform: translateY(-100%);
}
.box_square.effect3.top_to_bottom a:hover .img {
	-webkit-transform: translateY(75px);
    -moz-transform: translateY(75px);
    -o-transform: translateY(75px);
    -ms-transform: translateY(75px);
	transform: translateY(75px);
}


/*--------------------------------------------------------------------------------------*/
.box_square.effect6 {overflow: hidden;}
.box_square.effect6.colored .box_info 	{background: rgba(212, 14, 30, 0.6) none repeat scroll 0 0;}
.box_square.effect6 .box_info h4{
    background: #111111 none repeat scroll 0 0;
    color: #fff;
    font-size: 13px;
    margin: 30px 0 0;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
	-webkit-transition: all 0.35s ease-in-out 0s;
    -moz-transition: all 0.35s ease-in-out 0s;
	-o-transition: all 0.35s ease-in-out 0s;
    -ms-transition: all 0.35s ease-in-out 0s;
    transition: all 0.35s ease-in-out 0s;
}
.box_square.compressed .box_info h4{font-size: 12px;}
.box_square.effect6.colored a:hover .box_info h4 span{text-decoration: none; color: #fff;}
.box_square.effect6.colored .box_info h4{background: rgba(212, 14, 30, 1) none repeat scroll 0 0; color: #fff;}
.box_square.effect6 .img {
	-webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
	transform: scale(1);
	
	-webkit-transition: all 0.35s ease-in-out 0s;
    -moz-transition: all 0.35s ease-in-out 0s;
	-o-transition: all 0.35s ease-in-out 0s;
    -ms-transition: all 0.35s ease-in-out 0s;
    transition: all 0.35s ease-in-out 0s;
}

.box_square.effect6 .box_info 			{
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    opacity: 0;
	-webkit-transition: all 0.35s ease-in-out 0s;
    -moz-transition: all 0.35s ease-in-out 0s;
	-o-transition: all 0.35s ease-in-out 0s;
    -ms-transition: all 0.35s ease-in-out 0s;
    transition: all 0.35s ease-in-out 0s;
    visibility: hidden;
}
.box_square.effect6 .box_info p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-style: italic;
    padding: 20px;
    position: relative;
    text-align: center;
	-webkit-transition: all 0.35s linear 0.1s;
    -moz-transition: all 0.35s linear 0.1s;
	-o-transition: all 0.35s linear 0.1s;
    -ms-transition: all 0.35s linear 0.1s;
    transition: all 0.35s linear 0.1s;
}
.box_square.compressed .box_info p{font-size: 10px;}
.box_square.effect6 a:hover .img {
	-webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
	transform: scale(1.5);
}
.box_square.effect6 a:hover .box_info 	{opacity: 1;   visibility: visible;}
.box_square.effect6.from_top_and_bottom .box_info h4,
.box_square.effect6.top_to_bottom .box_info h4,
.box_square.effect6.top_to_bottom .box_info p {
	-webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
	transform: translateY(-100%);
}
.box_square.effect6.from_top_and_bottom .box_info p,
.box_square.effect6.bottom_to_top .box_info h4,
.box_square.effect6.bottom_to_top .box_info p  {
	-webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    -ms-transform: translateY(100%);
	transform: translateY(100%);
}
.box_square.effect6.from_top_and_bottom a:hover .box_info h4, .box_square.effect6.from_top_and_bottom a:hover .box_info p {
	-webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -o-transform: translateY(20px);
    -ms-transform: translateY(20px);
	transform: translateY(20px);
}
.box_square.compressed.effect6.from_top_and_bottom a:hover .box_info h4,
.box_square.compressed.effect6.from_top_and_bottom a:hover .box_info p,
.box_square.effect6.top_to_bottom a:hover .box_info h4,
.box_square.effect6.top_to_bottom a:hover .box_info p,
.box_square.effect6.bottom_to_top a:hover .box_info h4,
.box_square.effect6.bottom_to_top a:hover .box_info p  {
	-webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
	transform: translateY(0px);
}
.box_square.effect6.from_left_and_right .box_info h4 {
	-webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
	transform: translateX(-100%);
}
.box_square.effect6.from_left_and_right .box_info p	{
	-webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    -ms-transform: translateX(100%);
	transform: translateX(100%);
}
.box_square.effect6.from_left_and_right a:hover .box_info h4,
.box_square.effect6.from_left_and_right a:hover .box_info p {
	-webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -o-transform: translateX(0px);
    -ms-transform: translateX(0px);
	transform: translateX(0px);
}