@charset "UTF-8";
/**
Theme Name: Ügyfélszolgálat
Author: the Jófogás team
Author URI: http://www.jofogas.hu/
Description: Theme for Jófogás static pages
Version: 0.1
*/

/* Open Sans (font-family: 'Open Sans', sans-serif;) */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600,800,700,300italic&subset=latin,latin-ext);
/* Quicksand (font-family: 'Quicksand', sans-serif;) */
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,300&subset=latin,latin-ext);

@font-face {
  font-family: 'BerlinSansBold';
  src: url('font/BerlinSansFBDemi-Bold.woff') format('woff'),
       url('font/BerlinSansFBDemi-Bold.ttf')  format('truetype');
}

@font-face {
  font-family: 'BerlinSans';
  src: url('font/BerlinSansFB-Reg.woff') format('woff'),
       url('font/BerlinSansFB-Reg.ttf')  format('truetype');
}

/* BASE CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	text-decoration:none;
}

body
{
	font-family: Arial,sans-serif;
	font-size:14px;
	background-color:#e9e9e9;
	color:#676767;
}

a {
	text-decoration:none;
	color:#336699;
}


/*Teljes szélességű doboz*/
.full_box
{
	width:100%;
	background-size:cover;
	background-repeat:no-repeat;
}
.full_box:after { clear:both; }


/*Tartalmi doboz*/
.container
{
	max-width:940px;
	margin:0 auto;
	padding:20px;
}
.container:after { clear:both; }

/*Teli narancs gomb*/
.btn-fluid {max-width:none !important; width:calc(100% - 40px); }

.btn-orange
{
	text-align:center;
	padding:15px;
	padding-left:20px;
	padding-right:20px;
	cursor:pointer;
	color:#fff;
	border-radius:4px;
	border:0px;
	margin-top:15px;
	margin-bottom:15px;
	background-color:#f07330;
	font-size:14px;
	display:inline-block;
}
.btn-orange:hover
{
	background-color:#e06421;
}


/*Teli kék gomb*/
.btn-blue
{
	text-align:center;
	padding:15px;
	padding-left:20px;
	padding-right:20px;
	cursor:pointer;
	color:#fff;
	border-radius:4px;
	border:0px;
	margin-top:15px;
	margin-bottom:15px;
	background-color:#336699;
	font-size:14px;
	max-width:150px;
	display:inline-block;
}
.btn-blue:hover
{
	background-color:#235587;
}


/*Solid fehér gomb*/
.btn-solid
{
	text-align:center;
	padding:15px;
	padding-left:20px;
	padding-right:20px;
	cursor:pointer;
	color:#fff;
	border-radius:4px;
	border:1px solid #FFF;
	margin-top:15px;
	margin-bottom:15px;
	font-size:14px;
	display:inline-block;
}
.btn-solid:hover
{
	background-color:#FFF;
	color:#676767;
}


/*Solid szürke gomb*/
.btn-solid_gray
{
	text-align:center;
	padding:15px;
	padding-left:20px;
	padding-right:20px;
	cursor:pointer;
	color:#676767;
	border-radius:4px;
	border:1px solid #676767;
	margin-top:15px;
	margin-bottom:15px;
	font-size:14px;
	display:inline-block;
	background-color:#FFF;
}
.btn-solid_gray:hover
{
	background-color:rgba(0,0,0,1.00);
	color:#FFF;
}

/*Háttér beállítások*/
.bg-center { 
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
}

.bg-fluid { 
    background-repeat: no-repeat;
	background-size: 100%;
}

.bg-fluid-middle { 
    background-repeat: no-repeat;
	background-size: 100%;
	background-position:0% 50%;
}

.bg-fluid-bottom { 
    background-repeat: no-repeat;
	background-size: 100%;
	background-position:0% 100%;
}


/*Grid rendszer*/
.grid > :first-child {
	border-left:0px;
}

.grid:before, .grid:after {
    content:"";
    display: table ;
    clear:both;
}

.m1, .m2, .m3, .m4, .m5, .m6, .m7, .m8, .m9, .m10 .m11, .m12
{   
	float: left;
	margin-left: auto;
    left: auto;
    right: auto;
	border-left: 20px solid rgba(0,0,0,0.00);
	box-sizing:border-box;
}

.m-hidden  {display: none;}

.m1 {width:8.33333333%;}

.m2 {width:16.66666667%;}

.m3 {width:25%;}

.m4 {width:33.33333333%;}

.m5 {width:41.66666667%;}

.m6 {width:50%;}

.m7 {width:58.33333333%;}

.m8 {width:66.66666667%;}

.m9 {width:75%;}

.m10 {width:83.33333333%;}

.m11 {width:91.66666667%;}

.m12 {width:100%; border-left: 0px;}



@media screen and ( max-width: 800px )
{
	.sm1, .sm2, .sm3, .sm4, .sm5, .sm6, .sm7, .sm8, .sm9, .sm10 .sm11, .sm12
	{   
		border-left: 20px solid rgba(0,0,0,0.00);
	}
	
	.sm-hidden  {display: none;}
	
	.sm1 {width:8.33333333%;}
	
	.sm2 {width:16.66666667%;}
	
	.sm3 {width:25%;}
	
	.sm4 {width:33.33333333%;}
	
	.sm5 {width:41.66666667%;}
	
	.sm6 {width:50%;}
	
	.sm7 {width:58.33333333%;}
	
	.sm8 {width:66.66666667%;}
	
	.sm9 {width:75%;}
	
	.sm10 {width:83.33333333%;}
	
	.sm11 {width:91.66666667%;}
	
	.sm12 {width:100%; border-left: 0px;}
}


@media screen and ( max-width: 400px )
{
	.xsm1, .xsm2, .xsm3, .xsm4, .xsm5, .xsm6, .xsm7, .xsm8, .xsm9, .xsm10 .xsm11, .xsm12
	{   
		border-left: 10px solid rgba(0,0,0,0.00);
	}
	
	.xsm-hidden  {display: none;}
	
	.xsm1 {width:8.33333333%;}
	
	.xsm2 {width:16.66666667%;}
	
	.xsm3 {width:25%;}
	
	.xsm4 {width:33.33333333%;}
	
	.xsm5 {width:41.66666667%;}
	
	.xsm6 {width:50%;}
	
	.xsm7 {width:58.33333333%;}
	
	.xsm8 {width:66.66666667%;}
	
	.xsm9 {width:75%;}
	
	.xsm10 {width:83.33333333%;}
	
	.xsm11 {width:91.66666667%;}
	
	.xsm12 {width:100%; border-left: 0px;}
}


/*Flex rendszer*/

.flex
{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 
  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.flex div {-webkit-flex: 1; -ms-flex: 1; flex: 1;}

.flex_basic {-webkit-flex: 1; -ms-flex: 1; flex: 1;}
.flex2 {-webkit-flex: 2; -ms-flex: 2; flex: 2;}
.flex3 {-webkit-flex: 3; -ms-flex: 3; flex: 3;}
.flex4 {-webkit-flex: 4; -ms-flex: 4; flex: 4;}
.flex5 {-webkit-flex: 5; -ms-flex: 5; flex: 5;}
.flex6 {-webkit-flex: 6; -ms-flex: 6; flex: 6;}
.flex7 {-webkit-flex: 7; -ms-flex: 7; flex: 7;}
.flex8 {-webkit-flex: 8; -ms-flex: 8; flex: 8;}
.flex9 {-webkit-flex: 9; -ms-flex: 9; flex: 9;}
.flex10 {-webkit-flex: 10; -ms-flex: 10; flex: 10;}
.flex11 {-webkit-flex: 11; -ms-flex: 11; flex: 11;}
.flex12 {-webkit-flex: 12; -ms-flex: 12; flex: 12;}
.flex13 {-webkit-flex: 13; -ms-flex: 13; flex: 13;}
.flex14 {-webkit-flex: 14; -ms-flex: 14; flex: 14;}
.flex15 {-webkit-flex: 15; -ms-flex: 15; flex: 15;}



/* Close btn */
.close_div { 
	width: 25px;
	right: 8px;
    top: 8px;
	position: absolute;
	margin: 5px;
	opacity:0.3;
}

svg {
	display: block;
}

.close-x {
  stroke: #676767;
  fill: transparent;
  stroke-linecap: round;
  stroke-width: 5;
}

.close_div:hover {
	opacity:1;
}




/*Fejléc*/
.header
{
	width:100%;
	background-color:#fff;
	height: 55px;
	position: fixed;
	top: 0px;
    z-index: 9;
    box-shadow: 0px 9px 50px -1px rgba(122, 131, 134, 0.16);
}
.slim-container
{
	max-width:940px;
	margin:0 auto;
	padding-left:20px;
	padding-right:20px;
}
.slim-container:after { clear:both; }

#jofogas_logo
{
	height: 30px;
	padding-top:13px;
}

a.svg {
  position: relative;
  display: inline-block; 
}

a.svg:after {
  content: ""; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
}

.ai
{
	float:right;
	margin-top:15px;
	color:#f07330;
}

#add_circle
{
	vertical-align: middle;
}


/*Lábléc*/
.footer_container {
	background-color: #213345;
	color: #6C8FB1;
}

.full_box.footer_app_promo {
	background: #fff;
	padding: 0px 15px 20px;
	width: auto;
}

.full_box.footer_app_promo .container {
  background: #f5f5f5;
  text-align: center;
  color: #676767;
}

.full_box.footer_app_promo .container div {
  padding-top: 15px;
}

.app-suggestor-footer__badge {
	margin: 0px 10px;
}

.app-suggestor-footer__badge img {
  height: 40px;
}

@media only screen and (max-width: 600px) {
	.app-suggestor-footer__badge {
		margin: 10px;
		display: block;
	}
}

.app-suggestor-footer__title {
	font-size: 22px;
	font-weight: bold;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	text-shadow: rgba(0,0,0,0.01) 0 0 1px;
	margin: 0 0 5px;
	line-height: 22px;
}


.footer_services a
{
	line-height:190%;
	font-weight:bold;
	font-size:12px;
	color: #6C8FB1;
}

#footer_barion_card 
{ width:100%; }

.copyright_box
{ 
	font-size:11px;
	line-height:140%;
	text-align: justify;
	padding: 15px 20px;
}

.sepa {
	margin-top:20px;
	height:1px; 
	width:100%;
	border-bottom:1px solid #2B4156;
}

.copyright:after
{ 
	content:"";
    display: table ;
    clear:both;
}

#jofogas_copyright
{ 
	width:100px;
	margin-right:155px;
	float:left;
}

.sc_sites, .sc_sites a
{
	font-size:11px;
	color:#6C8FB1;
	line-height:140%;
	text-align:justify;
	padding-top: 0px;
    padding-bottom: 0px;
}

.sc_sites p
{
	margin-top: 20px;
	padding: 5px 0px;
}


.footer_menu, .footer_menu2 {
	width:calc(100% - 40px);
	padding:20px;
	overflow:hidden;
	height:60px;
	text-align:center;
	display:none;
}

.footer_menu a, .footer_menu2 a {
	color: #6C8FB1;
}

.footer_menu2 {
	margin-bottom: 20px;
}

#footer_services, #footer_us {
	color:#6C8FB1;
	border-bottom:1px solid #ccc;
	cursor:pointer;
}


.footer_menu p, .footer_menu2 p {
	padding-top:20px;
	padding-bottom:30px;
	font-size:14px;
	font-weight:bold;
}

.footer_menu_change {
	height:100% !important;
}


.footer_menu > :nth-child(1) { height: 29px;}
.footer_menu2 > :nth-child(1) { height: 29px;}

.br_f {display:none;}




/* Változások 945px alatt */
@media screen and ( max-width: 945px )
{
	.footer_menu, .footer_menu2 { display:block; }
	#f_services { display:none; }
	#phone_app_txt { display:none; }
	.copyright_box img { display:none; }
	.br_f { display:none; }

	.ai 		{width:32px; height:32px; overflow:hidden; margin-top:11px;}
	#add_circle {font-size:32px;}
	
	#footer_ingatlan, #footer_allas { border-left: 0px; padding-left: 0px; }
	#footer_jofogas, #footer_ingatlan, #footer_allas { width: calc(100% + 40px); margin-left: -20px; }
	#footer_ingatlan, #footer_allas { margin-top:20px;}
	#footer_ingatlan { border-top: 1px solid #324B61; border-bottom: 1px solid #324B61; padding: 20px 0px; }
	.footer_app_promo { text-align: center; }
	.jofogas_logo_footer { height: 28px; margin-right: 0px; }
	#footer_services, #footer_us { border-bottom: 1px solid #2B4156; }
	.footer_menu, .footer_menu2 { padding: 20px 0px; width: 100%;}
}


/* Változások 450px alatt */
@media screen and ( max-width: 450px )
{
	.br_f { display:block; padding:2px; }
}



/* ANIMATE CSS */

.animated_fast {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated_delay1 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay:0.5s;
}

.animated_delay2 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay:1.2s;
}

.animated_delay3 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay:1.9s;
}

.animated_delay4 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay:2.8s;
}

.animated_delay5 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay:3.8s;
}

.animated_delay5_slow {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay:3.8s;
}

.animated_fast {
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated_slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay:1.5s;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% { 
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
  
  100% { opacity:1; }
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
  
  100% { opacity:1; }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
	opacity:1;
  }
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
	opacity:1;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
	opacity:1;
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}


@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
	opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
	opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }


  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
  }

  to {
	opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
  }

  to {
	opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.bounceRight {
  -webkit-animation-name: bounceRight;
  animation-name: bounceRight;
}

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
	
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to { opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.fadeIn_custom1 {
  animation-name: zoomIn;
  animation-delay:0.2s;
}

.fadeIn_custom2 {
  animation-name: zoomIn;
  animation-delay:0.8s;
}

.fadeIn_custom3 {
  animation-name: zoomIn;
  animation-delay:0.4s;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
  
  100% { opacity: 1; }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
    transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
    transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
    transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
    transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}




/* STYLE */

body {
	background-color: #FFF;
}

h2 {
	font-size: 20px;
	font-weight: bold;
	color: #767676;
}

a {
	font-size: 14px;
	color: #336699;
	font-weight: normal;
}

.head_crea {
	position: relative;
	height: 400px;
	background-color: #77DBC0;
	overflow: hidden;
}

b { font-weight: bold; }

#ugyfelszolgalat_logo {
	display: block;
	height: 80px;
	margin-top: 40px;
	margin-left: calc(50% - 132px);
}

#zsozso_usz {
	position: absolute;
	height: 227px;
	left: calc(50% - 80px);
	bottom: 0px;
}

#lamp {
	position: absolute;
	height: 150px;
	left: calc(50% - 280px);
	bottom: 0px;
}

#computer {
	position: absolute;
	height: 140px;
	left: calc(50% - 105px);
	bottom: 0px;
}

#time {
	position: absolute;
	height: 50px;
	left: calc(50% + 202px);
	bottom: 140px;
}

#coffee {
	position: absolute;
	height: 66px;
	left: calc(50% + 190px);
	bottom: 46px;
}

#book2 {
	position: absolute;
	height: 16px;
	left: calc(50% + 200px);
	bottom: 30px;
}

#book1 {
	position: absolute;
	height: 30px;
	left: calc(50% + 182px);
	bottom: 0px;
}

#zsozso_usz_dark {
	position: absolute;
	height: 227px;
	left: calc(50% - 80px);
	bottom: 0px;
}

#lamp_dark {
	position: absolute;
	height: 150px;
	left: calc(50% - 280px);
	bottom: 0px;
}

#computer_dark {
	position: absolute;
	height: 140px;
	left: calc(50% - 105px);
	bottom: 0px;
}

#time_dark {
	position: absolute;
	height: 50px;
	left: calc(50% + 202px);
	bottom: 140px;
}

#coffee_dark {
	position: absolute;
    height: 35px;
    left: calc(50% + 191px);
    bottom: 46px;
}

#book2_dark {
	position: absolute;
	height: 16px;
	left: calc(50% + 200px);
	bottom: 30px;
}

#book1_dark {
	position: absolute;
	height: 30px;
	left: calc(50% + 182px);
	bottom: 0px;
}

#lamp_light {
	position: absolute;
    height: 126px;
    left: calc(50% - 207px);
    bottom: 2px;
}

.hidden {
	opacity: 0;
}


.dark_head {
    animation:dark_head 3s forwards;
    -moz-animation:dark_head 3s forwards;
	-webkit-animation:dark_head 3s forwards;
}

@-moz-keyframes dark_head {
    0%   {background:#77DBC0;}
    100%   {background:#063243;}
}

@-webkit-keyframes dark_head {
    0%   {background:#77DBC0;}
    100%   {background:#063243;}
}


.light_head {
    animation:light_head 3s forwards;
    -moz-animation:light_head 3s forwards;
	-webkit-animation:light_head 3s forwards;
}

@-moz-keyframes light_head {
    0%   {background:#063243;}
    100%   {background:#77DBC0;}
}

@-webkit-keyframes light_head {
    0%   {background:#063243;}
    100%   {background:#77DBC0;}
}




.search_container {
	background-color: #3C3C3C;
	padding: 25px;
	text-align: center;
	position: relative;
}

.search_container input[type="text"] {
	width: 100%;
	max-width: 500px; 
	height: 50px;
	box-sizing: border-box;
	padding: 15px;
	font-size: 20px;
	margin-bottom: 15px;
	border: 0px;
	border-radius: 5px;
	outline: none;
}

.search_btn {
	width: 140px;
	display: block;
	margin: 0 auto;
	background-color: #ff7330;
	text-align: center;
	box-sizing: border-box;
	padding: 10px 10px;
	color: #FFF;
	font-size: 14px;
	font-weight: bold;
	border-radius: 3px;
	border: 0px;
}

.search_btn:hover {
	background-color: #EC5C17;
}

/* Remove instant search plugin sub info */
.iss_match {
	font-weight: bold;
	text-decoration: none !important;
}
.iss-result {
	padding: 15px 10px !important;
}
.iss_results {
	margin-top: -4px !important;
	background-color: #f7f7f7 !important;
}

.faq {
	line-height: 200%;
	text-align: center;
	padding: 25px 0px;
}

.faq h2 {
	margin-bottom: 25px;
}

.faq_left {
	text-align: right;
	padding-right: 30px;
	border-right: 1px solid #E2E2E2;
}

.faq_right {
	text-align: left;
	padding-left: 15px;
}

.faq_sepa {
	height: 1px;
	width: 100%;
	max-width: 900px;
	background-color: #E2E2E2;
	display: block;
	margin: 0 auto;
}

.categories {
	text-align: center;
	line-height: 200%;
}

.categorie_box {
	width: 33.3333%;
	float: left;
	min-height: 310px;
}
.categories object {
	height: 100px;
	margin-bottom: 20px;
}

.search_result
{
	width: 100%;
	max-width: 500px;
	max-height: 155px;
	box-sizing: border-box;
	position: absolute;
	overflow-y: scroll;
	top: 71px;
	left: calc(50% - 250px);
	border: 1px solid #EBE8E8;
	background-color: #fff;
	text-align: left;
}

@media screen and ( max-width: 550px )
{
	.search_result { width: calc(100% - 50px); left: 25px; }
}

.search_result p
{
	padding: 5px 10px;
	font-size: 14px;
	line-height: 2em;
}

.search_result p:hover
{
	background-color: #EDEDED;
}


/* Article view */
.head {
	height: 100px;
	text-align: center;
	background-color: #77DBC0;
}

.head object {
	height: 55px;
	margin-top: 20px;
}

.menu_container {
	padding-right: 20px;
}

.selected_category {
	text-align: center;
	border-bottom: 1px solid #E2E2E2;
	margin-bottom: 20px;
}

.selected_category h2 {
	font-size: 14px;
	margin-bottom: 20px;
}

.selected_category object {
	width: 50px;
	margin-bottom: 10px;
}

.selected_article {
	color: #767676;
}

.footer_category {
	border-bottom: 0px;
	font-size: 16px;
}

.content_container {
	padding-left: 40px;
	border-left: 1px solid #E2E2E2;
	min-height: 300px;
}
.content_container.alone {
	border-left: 0;
}

.breadcrumbs {
	font-size: 12px;
	margin-bottom: 45px;
}

.breadcrumbs i {
	color: #9D9D9D;
	vertical-align: middle;
	font-size: 14px;
    margin-bottom: 2px;
}

.main_content h2 {
	margin-bottom: 20px;
}

.main_content {
	line-height: 180%;
	font-size: 14px;
}

.contact h2 {
	font-size: 12px;
	margin-top: 30px;
	margin-bottom: 15px;
}

.contact_box {
	float: left;
	margin-right: 30px;
	margin-bottom: 20px;
	width: 210px;
	border: 2px solid #77DBC0;
	border-radius: 4px;
}

.contact_head {
	height: 35px;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
	background-color: #77DBC0;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	margin-bottom: 10px;
}

.contact_info_box {
	padding: 8px 15px;
	font-size: 12px;
}

.contact_info_box i {
	float: left;
	font-size: 18px;
	color: #767676;
	margin-right: 15px;
	margin-bottom: 10px;
}


.usz_footer {
	max-width: 960px;
	margin: 0 auto;
	padding: 20px;
	border-top: 1px solid #E2E2E2;
	text-align: center;
	color: #336699;
	line-height: 180%;
}

.menu_container ul {
	color: #336699;
	font-size: 14px;
}

.menu_container ul li {
	font-weight: bold;
	margin-bottom: 10px;
	list-style-type: none;
	cursor: pointer;
}

.menu_container>ul>li {
  color: #767676;
}

.menu_container ul li li {
	font-weight: normal;
	margin-left: 20px;
	list-style-type: circle;
	font-size: 12px;
	line-height: 160%;
}

.menu_container ul li:first-child {
	margin-top: 10px;
}

.menu_container > ul > li {
	height: 20px;
    overflow: hidden;
}

.selected_menu {
	height: auto !important;
}


.help_box {
	font-weight: bold;
	margin: 20px 0px;
}

.help_box span {
	cursor: pointer;
	color: #336699;
}

.chat_btn {
	position: fixed;
	bottom: 20px;
	right: 5%;
	padding: 12px 15px;
	color: #FFF;
	font-size: 14px;
	background-color: #336699;
	border-radius: 5px;
	text-align: center;
	z-index: 10;
	box-shadow: 3px 3px 20px -3px rgba(0,0,0,0.60);
	cursor: pointer;
}

.chat_btn i {
	vertical-align: middle;
	font-size: 16px;
	color: #FFF;
}

.chat_btn_triangle {
	position: absolute;
	top: calc(50% - 10px);
	right: -8px; 
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #336699;
}

/* Tips */
.tips_item div:nth-child(1) {
	float: left;
	width: 100px;
	box-sizing: border-box;
}

.tips_item div:nth-child(2) {
	width: calc(100% - 100px);
	float: left;
	box-sizing: border-box;
}

.tips_item object {
	width: 78px;
}

.tips_item {
	height: 135px; 
	margin: 15px 0px;
}

.tips_item::after {
	content: '';
	display: block;
	clear: both;
}
.tips_item h2 {
	margin-bottom: 10px;
}




/* Chat box popup */
#chat_box {
	width: 325px; 
	height: 470px; 
	position: fixed;
	border-radius: 5px; 
	box-shadow: 0px 0px 45px -4px rgba(0,0,0,0.34);
	z-index: 99;
}
#drag_chat_area {
	position: absolute; 
	width: 100%; 
	height: 90px; 
	top: 0px; 
	left: 0px;
	cursor: move;
}
#chat_close_icon {
	position: absolute;
	color: #FFFFFF;
	font-size: 22px;
	right: 15px;
	top: 15px;
	z-index: 2;
	cursor: pointer;
}
#chat_box iframe {
	border: 0px; 
	width: 325px; 
	height: 470px; 
}
.hidde {
	display: none;
}

.file_upload_box p {
	float: left;
	margin-top: 15px;
}

.file_upload_box input {
	float: right;
	margin-top: 12px;
}

.file_upload_box::after {
	content: '';
	display: block;
	clear: both;
}

#file_upload_btn {
	color: #336699;
	border: 1px solid #336699;
	background-color: #FFF;
	border-radius: 3px;
}

#file_upload_btn:hover {
	background-color: #336699;
	color: #FFF;
}

#send_messages_btn {
	width: 150px;
	margin: 0 auto;
	margin-top: 20px;
	font-weight: bold !important;
	display: block !important;
}

.search_item {
	padding: 20px 0px;
	line-height: 160%;
}

.search_item h3 a {
	font-size: 16px;
	margin-bottom: 5px;
}

.search_item_content {
	display: block;
	text-overflow: ellipsis;
	white-space: nowrap;  
    overflow: hidden;
}


.selected_item {
	font-weight: bold;
    color: #767676;
}

.head_404 {
	position: relative;
	height: 400px;
	background-color: #77DBC0;
	overflow: hidden;
	background-image:url(elements/404_2x.png);
	background-size: 454px;
    background-position: center 124px;
    background-repeat: no-repeat;
}
	
.text_404 {
	background-color: #213345;
}
	
.text_404 h2 {
	font-size: 28px;
	line-height: 24px;
	font-weight: bold;
	color: #FFF !important;
}
	
.text_404 h2 span {
	font-size: 14px;
    font-weight: normal;
    margin-top: -12px;
    line-height: 20px;
    display: block;
	color: #D9D9D9;
}

@media screen and ( max-width: 800px )
{
	.faq_left, .faq_right { text-align: left; padding-left: 20px; }
	.menu_container { padding-right: 0px; }
	.content_container { 
		padding-left: 0px; 
		border-left: 0px;
		border-top: 1px solid #E2E2E2;
		padding-top: 20px; 
	}
}

@media screen and ( max-width: 750px )
{
	.categorie_box { width: 50%; }
}

@media screen and ( max-width: 550px )
{
	.tips_item { height: auto; margin-bottom: 45px; }
	.tips_item div:nth-child(1), .tips_item div:nth-child(2) { 
		float: none;
		width: 100%;
		text-align: center; 
	}
	.contact_box { width: 100%; }
	.search_result { width: calc(100% - 50px); left: 25px; 
}

@media screen and ( max-width: 470px )
{
	.categorie_box { width: 100%; }
	.chat_btn span  { display: none; }
}
	
@media screen and ( max-width: 400px )
{
	.file_upload_box p { float: none; margin-bottom: 10px; }
	.file_upload_box input { float: none; margin-top: 0px;}
}