/**
 * Name: layout.css
 *	
 *	T.O.C
 *
 * =Wrap
 * =Header Top
 * =Header
 * =Logo
 * =Menu
 * =Mobile Menu
 * =Mobile menu trigger
 * =Custom search form
 * =Sticky Header
 * =Content
 * =Page Header
 * =Footer Top
 * =Footer
 * =Footer Bottom
 * =Back to top 
 *
 */

 
/* ========================================================================== */
/* Wrap
/* ========================================================================== */
#wrap
{
	position: relative;
	background-color: #fff;
}

@media (max-width: 767px)
{
	#wrap
	{
		border-top: 10px solid #232323;
	}
}

/* ========================================================================== */
/* Header Top
/* ========================================================================== */
#header-top
{
	padding: 12px 0;
	background-color: #232323;
	color: #fff;
}

#header-top a, #header-top h1, #header-top h2, #header-top h3, #header-top h4, #header-top h5, #header-top h6
{
	color: #fff;
}

#header-top .widget:last-child { margin-bottom: 0; }

#header-top .widget_user_info { float: right; }

#header-top .widget_user_info ul
{
	list-style: outside none none;
	margin-bottom: 0;
}

#header-top .widget_user_info ul li
{
	display: inline-block; 
	padding-bottom: 0;
	padding-left: 30px;
	margin-right: 30px;
	margin-bottom: 0;
	position: relative;
}

#header-top .widget_user_info ul li p
{
	margin: 0;
}

#header-top .widget_user_info ul li span
{
	line-height: 25px;
	height: 25px;
	left: 0;
	position: absolute;
	top: -3px;
	text-align: center;
	width: 25px;
}

#header-top .widget_user_info ul li span i
{
	line-height: 25px;
}

#header-top .widget_user_info ul li:last-child { margin-right: 0; }
 
@media (max-width: 767px)
{
	#header-top
	{
		display: none;
	}
}

 
/* ========================================================================== */
/* Header 
/* ========================================================================== */
#header
{
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03);
}

	
/* ========================================================================== */
/* Logo
/* ========================================================================== */
#logo
{ 
	display: inline-block; 
	padding: 35px 0 33px 0;
}
	
	
	
	
/*-----------------------------------------------------------------------------------------------------------------*/
/* MAIN MENU - I. level
/*-----------------------------------------------------------------------------------------------------------------*/
#menu_main
{
	float: right;
}

#menu_main .menu, 
#menu_main .menu a
{
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 15px;
	color: #666; 
	text-decoration: none;
	display: block;
}

#menu_main .menu ul
{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#menu_main .menu li
{
	float: left;
	padding: 0px;
}

#menu_main .menu ul > li a
{
	padding: 48px 16px 48px 16px;
	border: none;
	color: #666;
	border-top: 2px solid transparent;
	margin-top: -2px;
	display: block;
}

#menu_main .menu ul > li:hover a
{
	border-top: 2px solid #4fb7ff;
	color: #5195be;
	background-color:#f8f8f8;
	-webkit-transition: all 0.3s;
	transition: color 0.3s;
	
}

@media (min-width: 1400px)
{
	#menu_main .menu li a
	{
		padding: 48px 30px 48px 30px;
	}
}

/*-----------------------------------------------------------------------------------------------------------------*/
/* II. level
/*-----------------------------------------------------------------------------------------------------------------*/
#menu_main .menu ul li ul,
#menu_main .menu ul li ul a
{
	font-size: 13px;
}

#menu_main .menu ul li ul
{
	display:block;
	z-index: 1000; /* 1 */
	visibility:hidden;
	min-width: 180px;
	border: 0px solid transparent;	
	background-color: rgba(49, 57, 71, 0.9);
	position:absolute;
	border-top: 2px solid #5195be;
  opacity:0.5;
  transition:opacity 0.5s linear;
}

#menu_main .menu ul li:hover > ul
{
	visibility:visible;
	opacity:1;
}

#menu_main .menu ul li:hover > ul li
{
	display:block;
	float:none;
}

#menu_main .menu ul li:hover > ul li a
{
	padding: 8px 15px 8px 15px;
	color: #fff;
	border: none;	
}

#menu_main .menu ul li:hover > ul li:hover a
{
	color: #6ceaf1;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

#menu_main .menu ul li:hover > ul a:hover,
#menu_main .menu ul li:hover > ul li:hover
{
	color:#FFFFFF;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}
	
@media (min-width: 768px) and (max-width: 979px)
{
	#menu_main { display: none; }
}

@media (max-width: 767px)
{
	#menu_main { display: none; }
}
	
/* ========================================================================== */
/* Mobile Menu 
/* ========================================================================== */
			
#mobile-menu
{
	border-bottom: 1px solid #e0e0e0;
	margin-bottom: 0;
	background-color: #454c59;
}
	
#mobile-menu li
{	
	display: block;
	margin: 0;
}
		
#mobile-menu > li > ul, 
#mobile-menu > li > ul > li > ul
{
	display: none;
	margin-left: 0;
	background-color: #5f6675;
}
	
#mobile-menu .sf-mega
{
	display: none;
	padding: 0;
	border: none;
	margin: 0;
	background-color: transparent;
}
	
#mobile-menu .sf-mega-section
{
	float: none;
	width: 100%;
	padding: 0;
	border: none;
}
	
#mobile-menu .sf-mega-section ul { margin-left: 0; }

#mobile-menu li a
{
	position: relative;
	display: block;
	padding: 15px 25px 15px 25px;
	border-top: 1px solid #e0e0e0;
	color: #fff;
	text-align: left;
	text-decoration: none;
}
	
#mobile-menu ul a
{
	padding-left: 45px;
	padding: 8px 25px 8px 45px;
}

#mobile-menu ul li ul a 
{
	padding-left: 65px;
}
	
#mobile-menu .mobile-menu-submenu-arrow
{
	position: absolute;
	top: 0;
	right: 0;
	width: 70px;
	height: 100%;
	border-left: 0px solid #e0e0e0;
	color: #fff;
	font-size: 20px;
	line-height: 50px;
	text-align: center;
	cursor: pointer;
}
	
#mobile-menu .mobile-menu-submenu-arrow:hover
{
	color: #5195be;
	/*background-color: #232323;*/
}
	
#mobile-menu li a:hover
{
	/*color: #5195be;*/
	color: #FFF;
	background-color: #596172;
}

#mobile-menu
{
	color: #5195be;
	display: none;
}

/* ========================================================================== */
/* Mobile menu trigger
/* ========================================================================== */
#mobile-menu-trigger
{ 
	float: right;
	display: none;
	font-size: 32px;
}

@media (min-width: 768px) and (max-width: 979px)
{
	#mobile-menu-trigger
	{ 
		display: block;
		margin-top: 45px;
		margin-right: 0;
	}	
}

@media (max-width: 767px)
{
	#mobile-menu-trigger
	{ 
		position: absolute;
		top: 35px;
		right: 20px;
		display: block;
		padding: 10px;
		margin-top: 0;
	}
}

@media only screen and (min-width: 480px) and (max-width: 767px)
{
	#mobile-menu-trigger
	{
		right: 30px;
	}
}		


/* ========================================================================== */
/* Sticky Header
/* ========================================================================== */
/*@media (min-width: 1025px)*/
@media (min-width: 979px)
{
	
/**
 * We want to allow the header to be sticky on resolutions > 1024. In order to do this
 * we position it absolute and when the sticky trigger point is reached we give the #header
	 * the .stuck class	and change it's positioning to fixed
 * 
 * 1. This value should be the height of the #header 
 * 2. This value should be the height of the #header-top	
 */
	
	#header-top
	{ 
		margin-bottom: 120px; 	/* 1 */	
	}
	
	#header
	{
		position: absolute;
		top: 48px; 				/* 2 */	
		right: 0;
		left: 0;
		z-index: 900; /* 1 */
		background: #FFF
		margin: 0 auto; 
	}
	
	/**
	 * 1. The z-index has to be 1020 so it is bigger than the back to top buttons z-index that is 1010
	 */
	
	#header.stuck
	{
		position: fixed;
		z-index: 1020; /* 1 */
		top: 0;
		width: 100%;
		padding-top: 10px;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
		margin: 0 auto;
		background-color: #fff;
		-webkit-transition: padding 0.3s;
		transition: padding 0.3s;
		border-top: 5px solid #232323;
	}
	
	#header.stuck  #logo
	{
		padding: 0px 0px 0px 0px;
	}
	
	#header.stuck #menu_main .menu li a
	{ 
		padding: 22px 16px 22px 16px;
		margin-top: -12px;
	}
	
	#header.stuck #menu_main .menu ul li:hover > ul li a
	{
		padding: 8px 15px 8px 15px;
		margin-top: 0px;
	}
}

@media (min-width: 1400px)
{
	#header.stuck #menu_main .menu li a
	{
		padding: 30px 30px 30px 30px;
	}
}
	
/* ========================================================================== */
/* Content
/* ========================================================================== */
#content
{
	padding-bottom: 30px;
}

#content_pravilniki
{
	padding-bottom: 30px;
}

/* ========================================================================== */
/* Page Header
/* ========================================================================== */
#page-header
{
	position: relative;
	z-index: 800; /* 1 */
	height: 140px;
	margin-bottom: 100px;
	background: #666666 no-repeat center center;
	background-size: cover;
	color: #DDD;
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

#page-header h3
{
	margin-bottom: 0;
	color: #fff;
	padding: 55px 0px 0px 0px;
	line-height: 24px;
	font-weight: 700;
	text-transform: lowercase;
}

#page-header-overlay
{ 
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 33, 56, 0.75);
}


.info-box
{
	color: #fff;
	background-color: #5195BE;
	padding: 15px 20px 8px 25px;
	font: 16px "PT Sans", Arial, sans-serif; 
	line-height: 22px;	
	position: relative;
	margin-bottom: 45px;

}

.info-box h3
{
	color: #fff;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.info-box:after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
	bottom: -24px;
	border: 12px solid;
	border-color: #5195BE transparent transparent #5195BE;
}

.info-box a
{
	color: #fff;
}


/* ========================================================================== */
/* Footer Top
/* ========================================================================== */
#footer-top
{
	background-color: #f9f9f9;
}
	
#footer-top-widget-area-1 {}


/* ========================================================================== */
/* Footer
/* ========================================================================== */
	
#footer
{ 
	padding: 26px 0 20px 0;	
	background-color: #232323;
	/*background: url(../images/bg-footer.jpg) no-repeat center center;*/
	color: #fff;
}

#footer a, 
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6
{
	color: #fff;
}

#footer .widget-title
{
	text-transform: none;
}

#footer .widget
{	
	margin-bottom: 0px;
}

#footer-widget-area-1 {}
#footer-widget-area-2 {}
#footer-widget-area-3 {}
#footer-widget-area-4 {}
	
/* ========================================================================== */
/* Footer Bottom
/* ========================================================================== */
  
#footer-bottom
{ 
	padding: 20px 0;	
	background-color: #000;
	color: #fff;	
}

#footer-bottom a, 
#footer-bottom h1,
#footer-bottom h2,
#footer-bottom h3,
#footer-bottom h4,
#footer-bottom h5,
#footer-bottom h6
{
	color: #fff;
}

#footer-bottom .widget:last-child
{
	margin-bottom: 0;
}

#footer-bottom .ewf_widget_social_media
{
	float: right;
}

#footer-bottom-widget-area-1 {}
#footer-bottom-widget-area-2 {}

#footer-bottom .copyrightwidget
{
	font: 12px "PT Sans", Arial, sans-serif; 
	line-height: 20px;	
	color: #666666;
}


@media (max-width: 767px)
{
	#footer-bottom .ewf_widget_social_media
	{
		float: none;
	}
}
	
/* ========================================================================== */
/* Back to top
/* ========================================================================== */
#back-to-top
{
	position: fixed;
	z-index: 1010;
	right: -40px;
	bottom: 20px;
	width: 40px;
	height: 40px;
	border-radius: 3px;
	background-color: #111;
	color: #fafafa;
	font-size: 30px;
	line-height: 40px;
	text-align: center;	
	text-decoration: none;				
	opacity: 0.5;
	cursor: pointer;
	-webkit-transition: all 0.4s ease 0s;
	transition: all 0.4s ease 0s;
}

#back-to-top i
{
	font-size: 28px;
	line-height: 40px;
	font-weight: normal;
	vertical-align: top;
	-webkit-transition: all 0.4s ease 0s;
	transition: all 0.4s ease 0s;
}

#back-to-top:hover { background-color: rgba(0, 0, 0, 0.7); }
#back-to-top:hover i { color: #fff; }
#back-to-top.visible { right: 40px; }
#back-to-top.gone { right: -40px; }	


/* ========================================================================== */
/* separator
/* ========================================================================== */
.sep-40
{
	margin-bottom: 40px;
}