/*╔════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╗*/
/*║ HEADER I                                                                                                                                                                                                                                              ║*/
/*╚════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╝*/
/***-------------------------------------------*** Body ***-------------------------------------------***/
body { padding-top: 120px; }

/***-------------------------------------------*** Header ***-------------------------------------------***/
header {
	position: fixed;
	height: 120px;
	z-index: 1000;
	left: 0;
	top: 0;
	right: 0;
	background: #FFFFFF;
}
header a {
	text-decoration: none;
}
header .cms_container_wide {
	position: relative;
	height: 120px;
	padding: 0 30px;
}

/***-------------------------------------------*** Hamburger ***-------------------------------------------***/
#nav-icon4 {
  width: 40px;
  height: 30px;
  position: relative;
  display: inline-block;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
#nav-icon4 span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: #FFFFFF;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
  top: 12px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
  top: 25px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
body.navi #nav-icon4 span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0;
  left: 5px;
}
body.navi #nav-icon4 span:nth-child(2) {
  width: 0%;
  opacity: 0;
}
body.navi #nav-icon4 span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 29px;
  left: 5px;
}

/***-------------------------------------------*** Logo ***-------------------------------------------***/
body #logo_container {
    position: absolute;
    left: 30px;
    top: 25px;
    bottom: 25px;
    z-index: 1;
    width: 340px;
    height: 70px;
    overflow: hidden;
}
body #logo_container > a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: url(/pages/img/logo.svg) no-repeat center;
    background-size: contain;
}

/***-------------------------------------------*** Service Navigation ***-------------------------------------------***/
header #hService {
	padding: 20px 0 0 0;
	display: flex;
	justify-content: flex-end;
	align-content: flex-end;
	align-items: flex-end;
	flex-wrap: nowrap;
}
header #hService ul	{
	display: flex;
}
header #hService ul li {
	padding: 0 0 0 30px;
	list-style: none;
}
@media screen and (max-width: 959px) {
	header #hService ul li a i { margin-right: 0; }
	header #hService ul li a span { display: none; }
}

/***-------------------------------------------*** Desktop ***-------------------------------------------***/
@media screen and (min-width: 1518px) {
	header #hNavigation > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		width: 100%;
		padding: 27px 0 0 340px;
	}
	header #hNavigation > ul > li {
		position: relative;
		list-style: none;
		border-color: transparent;
	}
	header #hNavigation > ul > li.current	{
		border-color: #E30613;
	}
	header #hNavigation > ul > li:hover {
		border-color: #E30613;
	}
	header #hNavigation > ul > li > a {
		display: block;
		border-bottom: 10px solid;
		border-color: inherit;
		/*padding: 0 15px 6px 15px;*/
		/*padding: 0 10px 6px 10px;*/
		padding: 0 8px 6px 8px;
	}
	header #hNavigation > ul > li.current > a,
	header #hNavigation > ul > li:hover > a {
		color: #E30613 !important;
	}
	header #hNavigation > ul > li > a:after {
		content: "|";
		transform: rotate(22deg);
		position: absolute;
		top: -1px;
		right: -6px;
		color: #E30613;
		font-weight: bold;
	}
	header #hNavigation > ul > li > ul {
		display: none;
		position: absolute;
		left: 0;
		top: 39px;
		min-width: 100%;
		padding: 12px 15px;
		background: #FFFFFF;
		box-shadow: 0 10px 10px rgba( 0,0,0,0.25 );
	}
	header #hNavigation > ul > li:hover > ul {
		display: block;
		border-top: 10px solid;
		border-color: inherit;
	}
	header #hNavigation > ul > li > ul > li	{
		list-style: none;
	}
	header #hNavigation > ul > li > ul > li > a	{
		display: block;
		padding: 5px 10px;
		margin: 3px 0;
	}
	header #hNavigation > ul > li > ul > li > a,
	header #hNavigation > ul > li > ul > li > ul >li > a {
		/*background: rgba(227, 6, 19, 0.3);*/
		background: #E30613;
		color: #FFFFFF;
	}
	header #hNavigation > ul > li > ul > li.active > a,
	header #hNavigation > ul > li > ul > li > ul >li.active > a,
	header #hNavigation > ul > li > ul > li.current > a,
	header #hNavigation > ul > li > ul > li > ul >li.current > a,
	header #hNavigation > ul > li > ul > li > a:hover,
	header #hNavigation > ul > li > ul > li > ul >li > a:hover {
		/*background: #E30613;*/
		background: #FFFFFF;
		color: #E30613;
	}
	header #hNavigation > ul > li > ul > li > ul > li {
		list-style: none;
		margin: 3px 0 3px 15px;
	}
	header #hNavigation > ul > li > ul > li > ul > li > a {
		display: block;
		padding: 5px 10px;
	}
	header #hHamburger {
		display: none;
	}
}

/***-------------------------------------------*** Tablet ***-------------------------------------------***/
@media screen and (min-width: 960px) and (max-width: 1517px) {
	header #hNavigation	{
		position: fixed;
		top: 120px;
		right: -100%;
		bottom: 0;
		overflow-y: auto;
		transition: all 0.3s;
	}
	body.navi header #hNavigation {
		right: 0;
	}
	header #hNavigation > ul {
		display: block;
		padding: 10px 0;
		background: #FFFFFF;
	}
	header #hNavigation ul li {
		list-style: none;
	}
	header #hNavigation ul li a	{
		display: block;
		padding: 5px 15px;
	}
	header #hNavigation > ul > li > ul { padding: 0 15px; }
	header #hNavigation > ul > li > ul > li > ul { padding: 0 0 0 15px; }
	header #hNavigation > ul > li > ul,
	header #hNavigation > ul > li > ul > li > ul {
		display: none;
	}
	header #hNavigation > ul > li.current > a,
	header #hNavigation > ul > li:hover > a {
		color: #E30613 !important;
	}
	header #hNavigation > ul > li > ul > li > a	{
		display: block;
		padding: 5px 10px;
		margin: 3px 0;
	}
	header #hNavigation > ul > li > ul > li > a,
	header #hNavigation > ul > li > ul > li > ul >li > a {
		/*background: rgba(227, 6, 19, 0.3);*/
		background: #E30613;
		color: #FFFFFF;
	}
	header #hNavigation > ul > li > ul > li.active > a,
	header #hNavigation > ul > li > ul > li > ul >li.active > a,
	header #hNavigation > ul > li > ul > li.current > a,
	header #hNavigation > ul > li > ul > li > ul >li.current > a,
	header #hNavigation > ul > li > ul > li > a:hover,
	header #hNavigation > ul > li > ul > li > ul >li > a:hover {
		/*background: #E30613;*/
		background: #FFFFFF;
		color: #E30613;
	}
	header #hNavigation > ul > li > ul > li > ul > li {
		margin: 3px 0 3px 15px;
	}
	header #hNavigation > ul > li > ul > li > ul > li > a {
		display: block;
		padding: 5px 10px;
	}
	header #hHamburger {
		position: absolute;
		right: 30px;
		bottom: 10px;
		width: 70px;
		height: 60px;
		padding: 15px;
		background: #E30613;
	}
	header #hNavigation li { position: relative; }
	header #hNavigation div.toggler {
		display: block;
		position: absolute;
		top: 0;
		right: 10px;
	}
	header #hNavigation div.toggler:after {
		cursor: pointer;
		display: block;
		content: "\f078";
		border-radius: 50%;
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		font-size: 28px;
		text-align: center;
		color: #E30613;
	}
	header #hNavigation > ul > li > ul > li > div.toggler:after,
	header #hNavigation > ul > li > ul > li > ul > li > div.toggler:after { color: #FFFFFF; }
	header #hNavigation > ul > li > div.toggler:after { line-height: 38px; }
	header #hNavigation > ul > li > ul > li > div.toggler:after { line-height: 36px; }
	header #hNavigation li.open > div.toggler:after {
		content: "\f077";
	}
	header #hNavigation li.open>ul {
		display: block !important;
	}
}

/***-------------------------------------------*** Smartphone ***-------------------------------------------***/
@media screen and (max-width: 959px) {
	header #hNavigation	{
		position: fixed;
		top: 120px;
		right: -100vW;
		bottom: 0;
		width: 100vW;
		overflow-y: auto;
		transition: all 0.3s;
		background: #FFFFFF;
	}
	body.navi header #hNavigation	{
		right: 0;
	}
	header #hNavigation > ul {
		display: block;
		padding: 10px 15px;
	}
	header #hNavigation ul li {
		list-style: none;
	}
	header #hNavigation ul li a {
		display: block;
	}
	header #hNavigation > ul > li > a {
		margin: 5px 0;
	}
	header #hNavigation > ul > li.current > a, header #hNavigation > ul > li:hover > a {
		color: #E30613 !important;
	}
	header #hNavigation > ul > li > ul > li > a	{
		display: block;
		padding: 5px 10px;
		margin: 3px 0;
	}
	header #hNavigation > ul > li > ul > li > a,
	header #hNavigation > ul > li > ul > li > ul >li > a {
		/*background: rgba(227, 6, 19, 0.3);*/
		background: #E30613;
		color: #FFFFFF;
	}
	header #hNavigation > ul > li > ul > li.active > a,
	header #hNavigation > ul > li > ul > li > ul >li.active > a,
	header #hNavigation > ul > li > ul > li.current > a,
	header #hNavigation > ul > li > ul > li > ul >li.current > a,
	header #hNavigation > ul > li > ul > li > a:hover,
	header #hNavigation > ul > li > ul > li > ul >li > a:hover {
		/*background: #E30613;*/
		background: #FFFFFF;
		color: #E30613;
	}
	header #hNavigation > ul > li > ul > li > ul > li {
		margin: 3px 0 3px 15px;
	}
	header #hNavigation > ul > li > ul > li > ul > li > a {
		display: block;
		padding: 5px 10px;
	}
	header #hHamburger {
		position: absolute;
		right: 30px;
		bottom: 10px;
		width: 70px;
		height: 60px;
		padding: 15px;
		background: #E30613;
	}
	header #hNavigation li { position: relative; }
	header #hNavigation div.toggler {
		display: block;
		position: absolute;
		top: 0;
		right: 10px;
	}
	header #hNavigation div.toggler:after {
		cursor: pointer;
		display: block;
		content: "\f078";
		border-radius: 50%;
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		font-size: 28px;
		text-align: center;
		color: #E30613;
	}
	header #hNavigation > ul > li > ul > li > div.toggler:after,
	header #hNavigation > ul > li > ul > li > ul > li > div.toggler:after { color: #FFFFFF; }
	header #hNavigation > ul > li > div.toggler:after { line-height: 28px; }
	header #hNavigation > ul > li > ul > li > div.toggler:after { line-height: 36px; }
	header #hNavigation li.open > div.toggler:after {
		content: "\f077";
	}
	header #hNavigation > ul > li > ul,
	header #hNavigation > ul > li > ul > li > ul {
		display: none;
	}
	header #hNavigation li.open>ul {
		display: block !important;
	}
	header #hService i { padding: 0; }
}

@media screen and (max-width: 560px) {
	body { padding: 170px 0 0 0; }
	header { height: 170px; }
	header .cms_container_wide { height: 170px; }
	body #logo_container {
		top: 15px;
		bottom: auto;
		z-index: 1;
		width: 315px;
		height: 65px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	header #hHamburger {
		top: 95px;
		right: auto;
		bottom: auto;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	body, header .cms_container, header, body #logo_container, header #hHamburger {
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-o-transition: all 1s;
		-ms-transition: all 1s;
		transition: all 1s;
	}
	body.scrolled header { background: #FFFFFF; height: 100px; }
	body.scrolled header .cms_container_wide { height: 100px; }
	body.scrolled { padding: 100px 0 0 0; }
	body.scrolled #logo_container { top: -100px; }
	body.scrolled header #hHamburger { top: 20px; }
	header #hService {
		position: absolute;
		bottom: auto;
		top: 115px;
		right: 30px;
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-o-transition: all 1s;
		-ms-transition: all 1s;
		transition: all 1s;
	}
	body.scrolled header #hService { top: 35px; }
	header #hNavigation { top: 170px; }
	body.scrolled header #hNavigation { top: 100px; }
}

@media screen and (max-width: 345px) {
	body { padding: 159px 0 0 0; }
	header { height: 159px; }
	header .cms_container_wide { height: 159px; }
	body #logo_container { width: 260px; height: 54px; }
	header #hHamburger { top: 84px; }
	header #hService { top: 99px; }
}