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



		! ! !    R E A D   T H I S    ! ! ! 
		-----------------
		
		It's recomended to use/create a custom css file (ore place them at the end of this file) 
		to do you customizations in order to easily update the main css files without loosing your changes
				


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

	0.	RESET & CLEARFIX
	1.	BASICS (body, headers, links, etc)ml
	2. 	GENERAL ELEMENTS
	3.	HEADER
	4.	FOOTER
	5. 	MENU
	6. 	MENU TOGGLE (Hamburger)
	7. 	HEADER / MENU OPTIONS
	8. 	HERO / PAGETITLE
	9. 	PORTFOLIOt
	10. BLOG
	11. COMMENTS
	12. PAGE LOADER-
	13. PAGINATION
	14. EXTERN PLUGINS (smartscroll,masonry,revolution slider, owl)
	15. COLUMNS SECTION
	16. FULLWIDTH SECTION
	17. THUMB OVERLAY EFFECT
	18. ANIMATIONS (portfolio, hero, text, ...)
	19. ELEMENTS / SHORTCODES
	20. WIDGETS
	21. LOADER ICONS
	22. CUSTOM STYLE
	
----------------------------------------------------------------------------------- */




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

2. GENERAL ELEMENTS

------------------------------------------------*/
#page-content {
	overflow: hidden;
	margin: 0;
	min-width: 1200px;
	max-width: 100%;
	min-height: 101vh;
	}
	.loading-end #page-content { min-height: auto; } 	/*workaround for isotope content (without other content) when scrollbar is active*/

.wrapper, .wrapper-small, .wrapper-big {
	width: 1200px;
	margin: 0 auto;
	max-width: calc(100% - 80px);
	}
	.wrapper-small { width: 780px; }
	#hero[class*='side-'] ~ #page-body .wrapper-small { max-width: calc(100% - 160px); }
	.wrapper-big { width: calc(100% - 80px); max-width: 1680px; }
	.wrapper::after, .wrapper-small::after, .wrapper-big::after  { content: ""; display: block; clear: both; visibility: hidden; font-size: 0;  height: 0; }

	
.align-center {
	text-align: center;
	}
	
.align-right {
	text-align: right;
	}

	
/* icons */
i[class*='ion-'], i[class*='fa-'] { color: #000000; }
.text-light i[class*='ion-'], .text-light i[class*='fa-'] { color: #ffffff; }
	
		

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

3. HEADER

------------------------------------------------*/
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 80px;
	height: 100%;
	z-index: 1501;
	background: #ffffff;
	
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-transition: all 799ms cubic-bezier(0.740, 0.215, 0.125, 1); /* older webkit */
	-webkit-transition: all 799ms cubic-bezier(0.740, 0.215, 0.125, 1.020);
	   -moz-transition: all 799ms cubic-bezier(0.740, 0.215, 0.125, 1.020);
		 -o-transition: all 799ms cubic-bezier(0.740, 0.215, 0.125, 1.020);
			transition: all 799ms cubic-bezier(0.740, 0.215, 0.125, 1.020); /* custom */
	-webkit-transition-timing-function: cubic-bezier(0.740, 0.215, 0.125, 1); /* older webkit */
	-webkit-transition-timing-function: cubic-bezier(0.740, 0.215, 0.125, 1.020);
	   -moz-transition-timing-function: cubic-bezier(0.740, 0.215, 0.125, 1.020);
		 -o-transition-timing-function: cubic-bezier(0.740, 0.215, 0.125, 1.020);
			transition-timing-function: cubic-bezier(0.740, 0.215, 0.125, 1.020); /* custom */
	transition-delay: 0.06s;
	}
	header.header-right { left: auto; right: 0; }
	header.menu-is-open,
	header.action-is-active { width: 380px; transition-delay: 0s; }
	
	/* right border instead of normal border because of the button overlay */
	header::after { 
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 100%;
	background: rgba(0,0,0,0.13);
	z-index: 1501;
	}
	header.header-right::after { 
	left: 0;
	right: auto;
	}
	
	#hero-and-body, #page-body, #hero, #footer {
	left: 0px;
	position: relative;
	-webkit-transition: left 599ms cubic-bezier(0.740, 0.215, 0.125, 1.020), right 599ms cubic-bezier(0.740, 0.215, 0.125, 1.020);
	   -moz-transition: left 599ms cubic-bezier(0.740, 0.215, 0.125, 1.020), right 599ms cubic-bezier(0.740, 0.215, 0.125, 1.020);
		 -o-transition: left 599ms cubic-bezier(0.740, 0.215, 0.125, 1.020), right 599ms cubic-bezier(0.740, 0.215, 0.125, 1.020);
			transition: left 599ms cubic-bezier(0.740, 0.215, 0.125, 1.020), right 599ms cubic-bezier(0.740, 0.215, 0.125, 1.020);
	}
	header.menu-is-open ~ #hero-and-body, header.menu-is-open ~ #page-body, header.menu-is-open ~ #hero, header.menu-is-open ~ #footer,
	header.action-is-active ~ #hero-and-body, header.action-is-active ~ #page-body, header.action-is-active ~ #hero, header.action-is-active ~ #footer {
	left: 300px;
	-webkit-transition: left 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020), right 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020);
	   -moz-transition: left 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020), right 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020);
		 -o-transition: left 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020), right 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020);
			transition: left 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020), right 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020); 
	transition-delay: 0.06s;
	}
	header.header-right.menu-is-open ~ #hero-and-body, header.header-right.menu-is-open ~ #page-body, header.header-right.menu-is-open ~ #hero, header.header-right.menu-is-open ~ #footer,
	header.header-right.action-is-active ~ #hero-and-body, header.header-right.action-is-active ~ #page-body, header.header-right.action-is-active ~ #hero, header.header-right.action-is-active ~ #footer {
	left: -300px;
	}

header .pseudo-close {
	position: fixed;
	width: 100%;
	height: 0;
	left: 380px;
	top: 0;
	background: transparent;
	visibility: hidden;
	}
	header.header-right .pseudo-close { right: 380px; left: auto; }
	header.menu-is-open .pseudo-close,
	header.action-is-active .pseudo-close { height: 100%; visibility: visible; }
	
header #logo {
	position: fixed;
	top: 20px;
	left: calc(80px + 40px);
	width: auto;
	z-index: 1502;
	}
	header.header-right #logo { left: calc(80px + 40px); right: auto; }
	header #logo.logo-right { left: 40px; right: auto; }
	header.header-right #logo.logo-right { left: calc(80px + 40px); right: auto; }
	header.header-right #logo.logo-left { right: 40px; left: auto; }

	header.menu-is-open:not(.header-right) #logo.logo-right,
	header.action-is-active:not(.header-right) #logo.logo-right { 
		right: calc(100% - 80px - 40px); 
		left: auto; 
		-webkit-transform: translateX(100%);
		-moz-transform: translateX(100%);
		-ms-transform: translateX(100%);
		-o-transform: translateX(100%);
		transform: translateX(100%);
	}
	header.header-right.menu-is-open #logo.logo-left,
	header.header-right.action-is-active #logo.logo-left { 
		left: auto; 
		right: calc(100% - 165px - 0px);
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
		transform: translateX(-100%);
		filter: brightness(72%) hue-rotate(181deg) saturate(124%) invert(100%);
	}
	header.action-is-active #logo { left: 30px; }
	header.action-is-active:not(.header-right) #logo.logo-right { right: calc(100% - 30px); }
	header.header-right.action-is-active #logo.logo-right { right: 30px; left: auto; }
	header.header-right.action-is-active #logo.logo-left { left: calc(100% - 30px); right: auto;  }

	
header #logo .text-logo {
	font-weight: 600;
	font-size: 28px;
	text-transform: uppercase;
	line-height: 50px;				/* Logo height */
	letter-spacing: 0.05em;
	}
	
header #logo a {
	display: block;
	width: auto;
	transition: all 0.3s ease;
	}
	header #logo.hide-on-hero a { opacity: 0; visibility: hidden; }
	header.menu-is-open #logo a { opacity: 1; visibility: visible; transition-delay: 0.8s; transition-duration: 0.5s; } 
	header.hero-invisible #logo.hide-on-hero a { opacity: 1; visibility: visible; }

header #logo img {
	width: auto;
	max-width: inherit;
	height: 50px;					/* Logo height */
	transition: all 0.3s ease;
	}
	
header #logo img#dark-logo + img#light-logo {
	position: absolute;
	top: 0; 
	left: 0;
	opacity: 0;
	visibility: hidden;
	}


/* Header widgets */
#header-widget {
	position: absolute;
	left: 20px;
	bottom: -10px;
	overflow: hidden;
	transition: all 0.4s ease;
	z-index: 1502;
	}
	header.action-is-active #header-widget { opacity: 0; visibility: hidden;}

#header-widget.custom {
	-webkit-transform:  rotate(-90deg);
  	-moz-transform:  rotate(-90deg);
  	-ms-transform:  rotate(-90deg);
  	-o-transform:  rotate(-90deg);
  	transform: rotate(-90deg);
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	color: rgba(0,0,0,0.35);
	font-size: 0.85em;
	width: 350px;
	line-height: 40px;
	}
	header.header-right #header-widget.custom { right: -290px; left: auto; }
	.text-light #header-widget.custom { color: rgba(255,255,255,0.5); }

#header-widget.social {
	bottom: 30px;
	left: 20px;
	width:  40px;
	text-align: center;
	}
	header.header-right #header-widget.social { right: 20px; left: auto; }

#header-widget.social .socialmedia-widget li {
	width: 100%;
	}
	
#header-widget.social .socialmedia-widget li a {
	padding: 0;
	padding-top: 12px;
	}

#header-widget.headerbutton {
	left: 0px;
	bottom: 0px;
	width: 100%;
	}
	#header-widget.headerbutton span {
	max-width: 80px;
		display:  inline-block;
	}

#header-widget.headerbutton .sr-button {
	width: calc(100% - 10px);
	padding: 15px 5px;
	display: block;
	margin: 0;
	border-radius: 0px;
	}
	#header-widget.headerbutton .sr-button.header-button:hover { opacity: 0.8; }

/* Header Actions */
#header-actions {
	position:  absolute;
	z-index: 1503;
	width: 100%;
	max-width: 80px;
	top: 105px;
	padding-top: 5px;		/* padding is for preventing cutting on backtotop (if alone) animation*/
	left: 0;
	overflow: hidden;
	min-height: 180px;
	transition: all 0.4s ease;
	}
	header.header-right #header-actions { right: 0; left: auto; }
	header.action-is-active #header-actions { opacity: 0; visibility: hidden;}

/* filter */
.header-filter {
	width: 14px;
	height: 14px;
	margin-left: 33px;
	position: relative;
	}

.filter-icon {
	width: 100%;
	height: 100%;
	display: block;
	cursor: pointer;
	}
.filter-icon::after, .filter-icon::before,
.filter-icon span::after, .filter-icon span::before {
	content: "";
	position: absolute;
	top:  0;
	left: 0;
	width: 5px;
	height: 5px;
	background: #000000;
	border-radius: 50%;
	transition: all 0.3s ease;
	}
	.text-light .filter-icon::after, .text-light .filter-icon::before,
	.text-light .filter-icon span::after, .text-light .filter-icon span::before { background: #ffffff; }
	.filter-icon::before {
	top:  auto;
	left: auto;
	bottom: 0;
	right: 0;
	}
	.filter-icon span::after {
	top:  0;
	right: 0;
	bottom: auto;
	left: auto;
	}
	.filter-icon span::before {
	top:  auto;
	right: auto;
	bottom: 0;
	left: 0;
	}
	.filter-icon:hover span::after, .filter-icon:hover span::before {
	opacity: 0.4;
	}

/* search */
.header-search {
	width: 30px;
	height: 17px;
	margin-left: 25px;
	margin-top:  20px;
	}
	#header-actions .header-search:first-child { margin-top: 0px; }

.header-search > a {
	display: inline-block;
	width: 17px;
	height: 17px;
	margin: 0 0 0 7px;
	transition: all 0.2s ease;
	text-align: center;
	}
.header-search > a:hover { opacity: 0.5; }
	.search {
	fill: #000000;
	}
	.text-light .search { fill: #ffffff; }


/* to top */
.header-totop {
	width: 30px;
	height: 22px;
	margin-left: 25px;
	margin-top:  30px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	text-align: center;
	}
	#header-actions .header-totop:first-child { margin-top: 0px; }
	.header-totop.visible {
	margin-top: 20px;
	opacity: 1;
	visibility: visible;	
	}

.header-totop a.totop {
	display: inline-block;
	width: 22px;
	height: 22px;
	margin: 0;
	transition: all 0.3s ease;
	filter: invert(1);
	}
.header-totop a.totop:hover { margin-top: -4px; }

.arrow { 
	width: 22px; 
	height: 22px;
	display: inline-block; 
	position: relative; 
	fill: #000000;
	}
	.text-light .arrow { fill: #ffffff; }
	.arrow.arrow-top {
	-webkit-transform:  rotate(90deg);
  	-moz-transform:  rotate(90deg);
  	-ms-transform:  rotate(90deg);
  	-o-transform:  rotate(90deg);
  	transform:  rotate(90deg);
	}
	.arrow.arrow-bottom {
	-webkit-transform:  rotate(-90deg);
  	-moz-transform:  rotate(-90deg);
  	-ms-transform:  rotate(-90deg);
  	-o-transform:  rotate(-90deg);
  	transform:  rotate(-90deg);
	}
	.arrow.arrow-right {
	-webkit-transform:  rotate(180deg);
  	-moz-transform:  rotate(180deg);
  	-ms-transform:  rotate(180deg);
  	-o-transform:  rotate(180deg);
  	transform:  rotate(180deg);
	}

/* share */
.header-share { 
	margin-top: 20px;
	position: relative;
	cursor: pointer;
	}
	#header-actions .header-share:first-child { margin-top: 0px; }
	.header-share ~ div { transition: all 0.3s ease 0.1s; }
	.header-share:hover ~ div { margin-left: 82px; }
	header.header-right .header-share:hover ~ div { margin-left: -22px; }

.share-icon { 
	width: 18px;
	height: 17px;
	margin-left: 32px;
	display: block;
	position: relative;
	transition: all 0.3s ease;
	}
	.header-share:hover .share-icon { margin-left: 82px; transition-delay: 0s; }
	header.header-right .header-share:hover .share-icon { margin-left: -22px; }

.share-icon .dots, .share-icon .dots::after, .share-icon .dots::before { 
	content: "";
	position: absolute;
	top: calc(50% - 3px);
	left: 0px;
	width: 5px;
	height: 5px;
	background: #000000;
	border-radius: 5px;
	}
	.text-light .share-icon .dots, .text-light .share-icon .dots::after, .text-light .share-icon .dots::before { background: #ffffff; }
	.share-icon .dots::after { 
	top: -5.5px;
	left: 12px;
	}
	.share-icon .dots::before { 
	top: 6px;
	left: 12px;
	}

.share-icon .strokes::after, .share-icon .strokes::before { 
	content: "";
	position: absolute;
	top: calc(50% - 4.5px);
	left: 2px;
	width: 14px;
	height: 1.5px;
	background: #000000;
	-webkit-transform:  rotate(-26deg);
  	-moz-transform:  rotate(-26deg);
  	-ms-transform:  rotate(-26deg);
  	-o-transform:  rotate(-26deg);
  	transform:  rotate(-26deg);
	}
.text-light .share-icon .strokes::after, .text-light .share-icon .strokes::before { background: #ffffff; }
	.share-icon .strokes::before { 
	top: calc(50% + 2.5px);
	left: 2px;
	-webkit-transform:  rotate(26deg);
  	-moz-transform:  rotate(26deg);
  	-ms-transform:  rotate(26deg);
  	-o-transform:  rotate(26deg);
  	transform:  rotate(26deg);
	}

.share-content {
	position: absolute;
	top: 0;
	left: -101%;
	width: 100%;
	transition: all 0.4s ease;
	}
	header.header-right .header-share .share-content { left: 101%; }
	.header-share:hover .share-content, header.header-right .header-share:hover .share-content { left: 0%; }

.share-content .widget-title {
	opacity: 0.3;
	margin-top: 0px;
	}

.share-content .socialmedia-widget {
	padding: 0;
	margin: 0;
	}

.share-content .socialmedia-widget li {
	width: 100%;
	display: block;
	margin-left: -10px;
	opacity: 0;
	transition: all 0.3s ease;
	}
	header.header-right .share-content .socialmedia-widget li { margin-left: 10px; }
	.header-share:hover .share-content .socialmedia-widget li { margin-left: 0px; opacity: 1; }
	.header-share:hover .share-content .socialmedia-widget li { transition-delay: 0.2s; }
	.header-share:hover .share-content .socialmedia-widget li:nth-child(2) { transition-delay: 0.26s; }
	.header-share:hover .share-content .socialmedia-widget li:nth-child(3) { transition-delay: 0.32s; }
	.header-share:hover .share-content .socialmedia-widget li:nth-child(4) { transition-delay: 0.38s; }
	
.share-content .socialmedia-widget li a {
	padding: 0;
	padding-top: 10px;
	}


/* Header Actions OVERLAY */
#header-actions-overlay {
	visibility: hidden;
	opacity: 0;
	transition: all 0.4s ease;
	background: #ffffff;
	}
	header.action-is-active #header-actions-overlay {
	visibility: visible;
	opacity: 1;
	}

#header-actions-overlay .action-close,
.header-search .search-close { 
	width: 30px;
	height: 30px;
	position: absolute;
	top: 20px;
	right: 20px;
	visibility: hidden;
	opacity: 0;
	transition: all 0.4s ease;
	}
	header.header-right #header-actions-overlay .action-close { left: 20px; right: auto; }
	header.action-is-active #header-actions-overlay .action-close {
	visibility: visible;
	opacity: 1;
	transition-delay: 0.4s;
	}

#header-actions-overlay .action-close::after, #header-actions-overlay .action-close::before,
.header-search .search-close::after, .header-search .search-close::before {
	content: "";
	position: absolute;
	width: 24px;
	height: 2px;
	left: 3px;
	top: 14px;	
	-webkit-transform: translateY(0) rotate(45deg);
	-moz-transform: translateY(0) rotate(45deg);
	-ms-transform: translateY(0) rotate(45deg);
	-o-transform: translateY(0) rotate(45deg);
	transform: translateY(0) rotate(45deg);
  	background-color: #000000;
	transition: all 0.2s ease;
	}	
	#header-actions-overlay .action-close::before,
	.header-search .search-close::before {
	-webkit-transform: translateY(0) rotate(-45deg);
	-moz-transform: translateY(0) rotate(-45deg);
	-ms-transform: translateY(0) rotate(-45deg);
	-o-transform: translateY(0) rotate(-45deg);
	transform: translateY(0) rotate(-45deg);
	}
	.text-light #header-actions-overlay .action-close::after, .text-light #header-actions-overlay .action-close::before,
	.text-light .header-search .search-close::after, .text-light .header-search .search-close::before { background-color: #ffffff; }

#header-actions-overlay .widget-title { 
	opacity: 0.3;
	margin-bottom: 15px;
	}

/* filter / search / category action */
#header-actions-overlay .action-overlay.filter-overlay,
#header-actions-overlay .action-overlay.search-overlay,
#header-actions-overlay .action-overlay.category-overlay {
	transition: all 0.4s ease;
	visibility: hidden;
	opacity: 0;
	position: absolute;
	left: 20px;
	bottom: 30px;
	width: calc(100% - 60px);
	}
	header.header-right #header-actions-overlay .action-overlay.filter-overlay,
	header.header-right #header-actions-overlay .action-overlay.search-overlay,
	header.header-right #header-actions-overlay .action-overlay.category-overlay { left: auto; right: 20px; text-align: right; }
	header.action-is-active.filter-overlay #header-actions-overlay .action-overlay.filter-overlay,
	header.action-is-active.search-overlay #header-actions-overlay .action-overlay.search-overlay,
	header.action-is-active.category-overlay #header-actions-overlay .action-overlay.category-overlay {
	visibility: visible;
	opacity: 1;
	left: 30px;
	transition-delay: 0.4s;
	}
	header.header-right.action-is-active.filter-overlay #header-actions-overlay .action-overlay.filter-overlay,
	header.header-right.action-is-active.search-overlay #header-actions-overlay .action-overlay.search-overlay,
	header.header-right.action-is-active.category-overlay #header-actions-overlay .action-overlay.category-overlay { left: auto; right: 30px; }

#header-actions-overlay .action-overlay .category-list {
	list-style:  none;
	margin: 0;
	padding: 0;
	}

#header-actions-overlay .action-overlay .category-list li {
	margin: 8px 0;
	} 	
	#header-actions-overlay .action-overlay .category-list li:first-child { margin-top: 0; }
	#header-actions-overlay .action-overlay .category-list li:last-child { margin-bottom: 0; }

#header-actions-overlay .action-overlay .category-list li a {
	position: relative;
	font-size: 24px;
	line-height: 32px;
	height: 32px;
	display: inline-block;
	}

#header-actions-overlay .action-overlay .category-list li a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: #000000;
	transition: all 0.3s ease;
	opacity: 0;
	}
	.text-light #header-actions-overlay .action-overlay .category-list li a::after { background: #ffffff; }
	#header-actions-overlay .action-overlay .category-list li.active a::after,
	#header-actions-overlay .action-overlay .category-list li a:hover::after {
	opacity: 1;
	}

/* search overlay */
#header-actions-overlay .action-overlay .searchform input[type=text] {
	font-size: 2.1em;
	line-height: 1.5em;
	height: auto;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	display: block;
	}
	#header-actions-overlay .action-overlay .searchform input[type=text]::-webkit-input-placeholder { opacity: 1; }
	#header-actions-overlay .action-overlay .searchform input[type=text]:-moz-placeholder { opacity: 1; }
	#header-actions-overlay .action-overlay .searchform input[type=text]::-moz-placeholder { opacity: 1; }
	#header-actions-overlay .action-overlay .searchform input[type=text]:-ms-input-placeholder { opacity: 1; }
	#header-actions-overlay .action-overlay .searchform input[type=text]:focus::-webkit-input-placeholder { opacity: 0.25; }
	#header-actions-overlay .action-overlay .searchform input[type=text]:focus:-moz-placeholder { opacity: 0.25; }
	#header-actions-overlay .action-overlay .searchform input[type=text]:focus::-moz-placeholder { opacity: 0.25; }
	#header-actions-overlay .action-overlay .searchform input[type=text]:focus:-ms-input-placeholder { opacity: 0.25; }

#header-actions-overlay .action-overlay .searchform input[type=submit] {
	display: none;
	}

#header-actions-overlay .action-overlay.search-overlay .widget-title {
	margin-top: 5px;
	}
	


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

5. 	MENU

------------------------------------------------*/
#menu-inner {
	width: 100%;
	height: calc(100% - 150px);				/* Logo height */
	margin-top: 100px; 
	position: absolute;
	top: 0;
	right: 0px;
	-webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
	transition: all 0.3s ease 0.3s;
	opacity: 0;
	visibility: hidden;
	overflow-x: hidden;
	background: #ffffff;					/* needed for mquerries */
	}
	header.menu-is-open #menu-inner {
	transition-delay: 0.2s;
	opacity: 1;
	visibility: visible;
/*	overflow-y: scroll;*/

	}
	
nav#main-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

nav#main-nav > ul > li {
	margin: 8px 0;
	display: block;
	padding: 0;
	position: relative;
	left: 0px;
	padding-left: calc(80px + 40px);   /*80 + 30 */
	-webkit-transform: translateX(-50px);
  	-moz-transform: translateX(-50px);
  	-ms-transform: translateX(-50px);
  	-o-transform: translateX(-50px);
  	transform: translateX(-50px);
	transition: all 0.5s ease;
	transition-delay: 0s;
	opacity: 0;
	visibility: hidden;
	} 	
	nav#main-nav > ul > li:first-child { margin-top: 0; }
	nav#main-nav > ul > li:last-child { margin-bottom: 0; }

	header.header-right nav#main-nav > ul > li {
	-webkit-transform: translateX(50px);
  	-moz-transform: translateX(50px);
  	-ms-transform: translateX(50px);
  	-o-transform: translateX(50px);
  	transform: translateX(50px);
	text-align: right;
	padding-right: calc(80px + 40px);   /*80 + 30 */
	padding-left: 0;
	} 	

	header.menu-is-open nav#main-nav > ul > li { 
		-webkit-transform: translateX(0%);
		-moz-transform: translateX(0%);
		-ms-transform: translateX(0%);
		-o-transform: translateX(0%);
		transform: translateX(0%); 
		opacity: 1;
		visibility: visible;
	}
	header.menu-is-open nav#main-nav > ul > li  { transition-delay: 0.3s; }
	header.menu-is-open nav#main-nav > ul > li:nth-child(2)  { transition-delay: 0.34s; }
	header.menu-is-open nav#main-nav > ul > li:nth-child(3)  { transition-delay: 0.38s; }
	header.menu-is-open nav#main-nav > ul > li:nth-child(4)  { transition-delay: 0.42s; }
	header.menu-is-open nav#main-nav > ul > li:nth-child(5)  { transition-delay: 0.46s; }
	header.menu-is-open nav#main-nav > ul > li:nth-child(6)  { transition-delay: 0.50s; }
	header.menu-is-open nav#main-nav > ul > li:nth-child(7)  { transition-delay: 0.54s; }
	header.menu-is-open nav#main-nav > ul > li:nth-child(8)  { transition-delay: 0.58s; }
		



nav#main-nav ul > li > a small { opacity: 0.5; }

nav#main-nav.underline ul > li > a::after {
	content: "";
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 2px;
	background: #000000;
	transition: all 0.3s ease;
	}

	/* Fade In Hover */
	nav#main-nav.underline ul > li > a::after {
	left: 0px;
	opacity: 0;
	-webkit-transform: translateX(-0%);
  	-moz-transform: translateX(-0%);
  	-ms-transform: translateX(-0%);
  	-o-transform: translateX(-0%);
  	transform: translateX(-0%);
	transition: all 0.4s ease;
	}
	nav#main-nav.underline ul > li > a:hover::after, nav#main-nav.underline ul > li.current_page_item > a::after  {
	opacity: 1;
	}

	/* Slide in Hover */
	nav#main-nav.underline.slide ul > li > a::after {
	left: -120px;
	-webkit-transform: translateX(-101%);
  	-moz-transform: translateX(-101%);
  	-ms-transform: translateX(-101%);
  	-o-transform: translateX(-101%);
  	transform: translateX(-101%);
	}
	header.header-right nav#main-nav.underline.slide ul > li > a::after {
	left: auto;
	right: -120px;
	-webkit-transform: translateX(101%);
  	-moz-transform: translateX(101%);
  	-ms-transform: translateX(101%);
  	-o-transform: translateX(101%);
  	transform: translateX(101%);
	}
	nav#main-nav.underline.slide ul > li > a:hover::after, nav#main-nav.underline.slide ul > li.current_page_item > a::after {
	left: 0px;
	-webkit-transform: translateX(0%);
  	-moz-transform: translateX(0%);
  	-ms-transform: translateX(0%);
  	-o-transform: translateX(0%);
  	transform: translateX(0%);
	}
	header.header-right nav#main-nav.underline.slide ul > li > a:hover::after, header.header-right nav#main-nav.underline.slide ul > li.current_page_item > a::after {
	left: auto;
	right: 0px;
	-webkit-transform: translateX(0%);
  	-moz-transform: translateX(0%);
  	-ms-transform: translateX(0%);
  	-o-transform: translateX(0%);
  	transform: translateX(0%);
	}
	
nav#main-nav > ul > li ul.sub-menu {
	margin: 0;
	padding: 7px 0 12px 2px;
	display: none;
	width: auto;
	}
	
nav#main-nav  ul.sub-menu ul.sub-menu {
	padding: 10px 0 10px 10px;
	margin: 0;
	display: none;
	}
	header:not(.menu-open) nav#main-nav  ul.sub-menu li:last-child > ul.sub-menu { padding-bottom: 0; }
	
nav#main-nav ul.sub-menu li {
	margin: 3px 0 2px 0;
	}
	
nav#main-nav ul.sub-menu > li > a {
	font-weight: 300; 
	font-size: 16px;
	height: 22px;
	line-height: 22px;
	}



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

6. 	MENU ACTIONS (Hamburger + language)

------------------------------------------------*/
.menu-actions {
	position: relative;
	z-index: 10;
	transition: all 0.4s ease;
	margin-top: 30px;
	width: 80px;
	}
	header.header-right .menu-actions { float: right; }
	header.action-is-active .menu-actions { opacity: 0; visibility: hidden; }
	
.menu-toggle {
	width: 30px;
	height: 30px;
	max-width: 100%; 
	position: relative;
/*	left: calc(50% - 0px);*/
	width: 100%;
	display: flex;
	align-items: center;
    justify-content: center;
	cursor: pointer;
	overflow: hidden;
	z-index: 10;
	transition: height 0.3s ease, transform 0.4s ease;
	filter: invert(1);
}
	
/* hamburger animation */
.menu-toggle span.hamburger, .menu-toggle span.hamburger:after, .menu-toggle span.hamburger:before {
	content: "";
	display: block;
	width: 26px;
	height: 2px;
	background: #000000;
	position: absolute;
	top: 50%; margin-top: -1px;
	left: 50%; margin-left: -13px;
	-webkit-transform: rotate(0deg);
  	-moz-transform: rotate(0deg);
  	-o-transform: rotate(0deg);
  	transform: rotate(0deg);
	-webkit-transition: all 0.4s cubic-bezier(0.600, 0.000, 0.200, 1.000);
	   -moz-transition: all 0.4s cubic-bezier(0.600, 0.000, 0.200, 1.000);
		 -o-transition: all 0.4s cubic-bezier(0.600, 0.000, 0.200, 1.000);
			transition: all 0.4s cubic-bezier(0.600, 0.000, 0.200, 1.000); 
	-webkit-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
	   -moz-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
		 -o-transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
			transition-timing-function: cubic-bezier(0.600, 0.000, 0.200, 1.000);
	transition-delay: 0s;		
	}
	.menu-toggle span.hamburger:before { margin-top: -7px; top: 0; }
	.menu-toggle span.hamburger:after { margin-top: 7px; top: 0; }
	
	header:not(.menu-is-open) .menu-toggle:hover span.hamburger {
		width:  18px;
		margin-left: -9px;
	}

	header.menu-is-open .menu-toggle span.hamburger { 
		background: transparent !important; 
		transition-delay: 0.1s;
		transition-duration: 0.2s;
	}
	header.menu-is-open .menu-toggle span.hamburger:before {  
		-webkit-transform: rotate(135deg);
	  	-moz-transform: rotate(135deg);
	  	-o-transform: rotate(135deg);
	  	transform: rotate(135deg);
		margin-top: 0px;
	}
	header.menu-is-open .menu-toggle span.hamburger:after {  
		-webkit-transform: rotate(-135deg);
	  	-moz-transform: rotate(-135deg);
	  	-o-transform: rotate(-135deg);
	  	transform: rotate(-135deg);
		margin-top: 0px;
	}


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

7. HEADER / MENU OPTIONS

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

/* dark header */
header.text-light { background: #000000; border-color: rgba(255,255,255,0.21);}
header.text-light::after { background: rgba(255,255,255,0.21);}
header.text-light nav#main-nav ul > li > a { color: #ffffff; }
header.text-light nav#main-nav:not(.underline) ul > li > a:hover, header.text-light nav#main-nav:not(.underline) ul > li.current_page_item > a { color: rgba(255,255,255,0.75); }
header.text-light nav#main-nav ul > li > a::after { background: #ffffff; }
header.text-light .menu-toggle span.hamburger, header.text-light .menu-toggle span.hamburger:after, header.text-light .menu-toggle span.hamburger:before { background: #ffffff; }
header.text-light #menu-inner { background: #000000; }
header.text-light #header-actions-overlay { background: #000000; }

/* switch logo appearance */
.loading-end header:not(.hero-invisible) #logo.text-light:not(.hide-on-hero) img#dark-logo { opacity: 0; visibility: hidden; }
	.loading-end header:not(.hero-invisible) #logo.text-light:not(.hide-on-hero) img#dark-logo + img#light-logo { opacity: 1; visibility: visible; }
body:not(.loading-end) #page-loader.show-logo.text-light + #page-content #logo img#dark-logo { opacity: 0; visibility: hidden; }
	body:not(.loading-end) #page-loader.show-logo.text-light + #page-content #logo img#dark-logo + img#light-logo { opacity: 1; visibility: visible; }

/* depending on the fullwidth text light section */
body #logo.bg-dark img#dark-logo { opacity: 0; visibility: hidden; }
	body #logo.bg-dark img#dark-logo + img#light-logo { opacity: 1; visibility: visible; }

header.menu-is-open #logo img#dark-logo,
header.action-is-active #logo img#dark-logo{ opacity: 1 !important; visibility: visible !important; }
	header.menu-is-open #logo img#dark-logo + img#light-logo,
	header.action-is-active #logo img#dark-logo + img#light-logo { opacity: 0 !important; visibility: hidden !important; }
header.text-light.menu-is-open #logo img#dark-logo,
header.text-light.action-is-active #logo img#dark-logo { opacity: 0 !important; visibility: hidden !important; }
	header.text-light.menu-is-open #logo img#dark-logo + img#light-logo,
	header.text-light.action-is-active #logo img#dark-logo + img#light-logo { opacity: 1 !important; visibility: visible !important; }



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

8. HERO / PAGETITLE

------------------------------------------------*/
#hero {
	position: relative;
	overflow: hidden;
	/*width: calc(100% - 80px);
	margin-left: 80px;
	}
	header.header-right ~#hero { margin-left: 0;*/ }
		
#hero { background: rgba(255,255,255,0.05); }
#hero.text-light { background: #000000; }
	
#hero.hero-full { min-height: 100vh; }
#hero.hero-big { min-height: 75vh; }

/* hero pagetitle */
#hero #page-title {
	padding-top: 100px;
	padding-bottom: 100px;
	position: relative;
	z-index: 1;
	}
	#hero #page-title:not(.wrapper):not(.wrapper-small) { width: calc(100% - 80px); padding-left: 40px; padding-right: 40px; }

#page-body #page-title {
	padding-bottom: 60px;
	position: relative;
	}
	
#hero.hero-full #page-title, #hero.hero-big #page-title, #hero[class*='side-'] #page-title {
	margin-top: 0px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%); 
	-moz-transform: translateY(-50%) translateX(-50%); 
	-ms-transform: translateY(-50%) translateX(-50%); 
	-o-transform: translateY(-50%) translateX(-50%); 
	transform: translateY(-50%) translateX(-50%);
	}

#hero.hero-full #page-title.title-top, #hero.hero-big #page-title.title-top, #hero[class*='side-'] #page-title.title-top,
#hero.hero-full #page-title.title-bottom, #hero.hero-big #page-title.title-bottom, #hero[class*='side-'] #page-title.title-bottom,
#hero.hero-full #page-title.push-bottom:not(.title-top), #hero.hero-big #page-title.push-bottom:not(.title-top), #hero[class*='side-'] #page-title.push-bottom:not(.title-top) {
	padding-top: 60px;
	top: 0;
	-webkit-transform: translateY(0%) translateX(-50%); 
	-moz-transform: translateY(0%) translateX(-50%); 
	-ms-transform: translateY(0%) translateX(-50%); 
	-o-transform: translateY(0%) translateX(-50%); 
	transform: translateY(0%) translateX(-50%);
	}
	
#hero.hero-full #page-title.title-bottom, #hero.hero-big #page-title.title-bottom, #hero[class*='side-'] #page-title.title-bottom { 
	top: auto;
	bottom: 0;
	padding-bottom: 60px;
	padding-top: 100px;
	}
	
#hero.hero-full #page-title.push-bottom:not(.title-top), #hero.hero-big #page-title.push-bottom:not(.title-top), #hero[class*='side-'] #page-title.push-bottom:not(.title-top) { 
	top: auto;
	bottom: 0;
	}

/* google map for hero*/	
#hero > .google-map { height: 400px; }
#hero.hero-full > .google-map { min-height: 100vh; }
#hero.hero-big > .google-map { min-height: 75vh; }


/* scroll down */
#hero #scrolldown { 
	position: absolute;
	bottom: 30px;
	left: calc(50% - 12px);
	padding-left: 18px;
	z-index: 100;
	}
	#hero #scrolldown.left { left: 48px; }
	#hero #scrolldown.right { left: auto; right: 48px; }

#hero #scrolldown span.text { 
	font-size: 13px;
	line-height: 20px;
	}

#hero #scrolldown .arrow { 
	position: absolute;
	top: calc(50% - 9px);
	left: -7px;
	-webkit-animation: scrolldown-anim 3.4s infinite ease;
	-moz-animation: scrolldown-anim 3.4s infinite ease;
	-o-animation: scrolldown-anim 3.4s infinite ease;
	animation: scrolldown-anim 3.4s infinite ease;
	}
	
@-webkit-keyframes scrolldown-anim {
	70% { margin-top: 0px; }
	85% { margin-top: 4px; }
	100% { margin-top: 0px; }
}
@-moz-keyframes scrolldown-anim {
	70% { margin-top: 0px; }
	85% { margin-top: 4px; }
	100% { margin-top: 0px; }
}
@-o-keyframes scrolldown-anim {
	70% { margin-top: 0px; }
	85% { margin-top: 4px; }
	100% { margin-top: 0px; }
}
@-ms-keyframes scrolldown-anim {
	70% { margin-top: 0px; }
	85% { margin-top: 4px; }
	100% { margin-top: 0px; }
}
@keyframes scrolldown-anim {
	70% { margin-top: 0px; }
	85% { margin-top: 4px; }
	100% { margin-top: 0px; }
}


/* side hero */
#hero-and-body {
	position: relative;
	width: calc(100% - 80px);
	margin-left: 80px;
	overflow: hidden;

}
	header.header-right ~ #hero-and-body { margin-right: 0; }

#hero[class*='side-'] {
	float: left;
	width: 50%;
	height: 100vh;
	margin: 0;
	} 
	#hero[class*='side-right'] { left: auto; right: 0; float: right; }
	#hero[class*='side-left-small'], #hero[class*='side-right-small'] { width: 40%; }

#hero[class*='side-'] ~ #page-body {
	width: 50%;
	float: right;
	margin: 0;
	}
	#hero[class*='side-right'] ~ #page-body { float: left;   }
	#hero[class*='side-left-small'] ~ #page-body, #hero[class*='side-right-small'] ~ #page-body { width: 60%; }

header.header-left ~ #hero-and-body #hero[class*='side-left'].is_stuck:not(.sticky_bottom) { margin-left: 80px; }
header.header-right ~ #hero-and-body #hero[class*='side-right'].is_stuck:not(.sticky_bottom) { margin-right: 80px; }


/* animation */
header.menu-is-open ~ #hero-and-body #hero[class*='side-right'].is_stuck:not(.sticky_bottom),
header.action-is-active ~ #hero-and-body #hero[class*='side-right'].is_stuck:not(.sticky_bottom) {
	right: -300px;
	-webkit-transition: left 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020), right 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020);
	   -moz-transition: left 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020), right 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020);
		 -o-transition: left 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020), right 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020);
			transition: left 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020), right 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020); /* custom */
	transition-delay: 0.06s;
	}
	header.header-right.menu-is-open ~ #hero-and-body #hero[class*='side-right'].is_stuck:not(.sticky_bottom),
	header.header-right.action-is-active ~ #hero-and-body #hero[class*='side-right'].is_stuck:not(.sticky_bottom) { right: 300px; }

header.menu-is-open ~ #hero-and-body #hero[class*='side-left'].is_stuck:not(.sticky_bottom),
header.action-is-active ~ #hero-and-body #hero[class*='side-left'].is_stuck:not(.sticky_bottom) {
	left: 300px;
	-webkit-transition: left 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020), right 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020);
	   -moz-transition: left 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020), right 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020);
		 -o-transition: left 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020), right 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020);
			transition: left 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020), right 849ms cubic-bezier(0.740, 0.215, 0.125, 1.020); /* custom */
	transition-delay: 0.06s;
	}
	header.header-right.menu-is-open ~ #hero-and-body #hero[class*='side-left'].is_stuck:not(.sticky_bottom),
	header.header-right.action-is-active ~ #hero-and-body #hero[class*='side-left'].is_stuck:not(.sticky_bottom) { left: -300px; }

.is-scrolling header.menu-is-open ~ #hero-and-body #hero[class*='side-'] { transition: none !important; }



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

12. PAGE LOADER

------------------------------------------------*/
#page-loader {
	position: fixed;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	z-index: 1500;					/* big z-index for revolution slider */
  	background: #ffffff;
	-webkit-transition: opacity 0.6s ease;
	   -moz-transition: opacity 0.6s ease;
	    -ms-transition: opacity 0.6s ease;
	     -o-transition: opacity 0.6s ease;
	        transition: opacity 0.6s ease;
	transition-delay: 0.9s;
	}
	#page-loader.text-light { background: #000000; }
	.loaded #page-loader { opacity: 0; transition-delay: 0.9s; }
	.loading-end #page-loader { display: none; }

#page-loader .loader-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
  	-moz-transform: translateX(-50%) translateY(-50%);
  	-ms-transform: translateX(-50%) translateY(-50%);
  	-o-transform: translateX(-50%) translateY(-50%);
  	transform: translateX(-50%) translateY(-50%);
	transition: opacity 0.6s ease 0.3s;
	}
	.loaded #page-loader .loader-icon { opacity: 0; }


#page-loader + #page-content #logo {
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	}
	body.loading-end #page-loader + #page-content #logo,
	#page-loader.show-logo + #page-content #logo {
	opacity: 1;
	visibility: visible;
	}

#page-loader.show-logo + #page-content #logo {
	-webkit-transition: all 0.7s cubic-bezier(0.600, 0.300, 0.000, 1.000);
	   -moz-transition: all 0.7s cubic-bezier(0.600, 0.300, 0.000, 1.000);
		 -o-transition: all 0.7s cubic-bezier(0.600, 0.300, 0.000, 1.000);
			transition: all 0.7s cubic-bezier(0.600, 0.300, 0.000, 1.000); /* custom */
	-webkit-transition-timing-function: cubic-bezier(0.600, 0.300, 0.000, 1.000);
	   -moz-transition-timing-function: cubic-bezier(0.600, 0.300, 0.000, 1.000);
		 -o-transition-timing-function: cubic-bezier(0.600, 0.300, 0.000, 1.000);
			transition-timing-function: cubic-bezier(0.600, 0.300, 0.000, 1.000); /* custom */
	}
body:not(.loaded) #page-loader.show-logo + #page-content #logo {
	-webkit-transform: translateX(-50%);
  	-moz-transform: translateX(-50%);
  	-ms-transform: translateX(-50%);
  	-o-transform: translateX(-50%);
  	transform: translateX(-50%);
	left: 50%;
	}
	body:not(.loaded) #page-loader.show-logo + #page-content header #logo.logo-right {
	-webkit-transform: translateX(50%);
  	-moz-transform: translateX(50%);
  	-ms-transform: translateX(50%);
  	-o-transform: translateX(50%);
  	transform: translateX(50%);
	left: auto;
	right: 50%;
	}
	body:not(.loaded) #page-loader.show-logo + #page-content header.header-right #logo {
	-webkit-transform: translateX(50%);
  	-moz-transform: translateX(50%);
  	-ms-transform: translateX(50%);
  	-o-transform: translateX(50%);
  	transform: translateX(50%);
	left: auto;
	right: 50%;
	}
	body:not(.loaded) #page-loader.show-logo + #page-content header.header-right #logo.logo-left {
	-webkit-transform: translateX(-50%);
  	-moz-transform: translateX(-50%);
  	-ms-transform: translateX(-50%);
  	-o-transform: translateX(-50%);
  	transform: translateX(-50%);
	right: auto;
	left: 50%;
	}

#page-loader + #page-content header {
	left: -81px;
	transition-duration: 0.7s;
	}
	#page-loader + #page-content header.header-right { left: -81px; right: auto; }
	.loaded #page-loader + #page-content header { right: 0; }
	.loaded #page-loader + #page-content header.header-right { left: 0; right: auto;}


#hero-and-footer{
	margin-left: 0px;
	position: relative;
    width: calc(100% - 80px);
    overflow: hidden;
    width: 100%;
}


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

22. CUSTOM STYLE

------------------------------------------------*/
header #logo .text-logo { line-height: 50px; }
header #logo img { height: 50px; }
#menu-inner { height: calc(100% - 50px - 75px); margin-top: calc(40px + 10px + 50px); }
.spacer-big.hero-spacer { height: calc(40px + 10px + 50px); }
#hero:not(.hero-big):not(.hero-full) #page-title { padding-top: calc(100px + 50px); }
#hero:not(.hero-big):not(.hero-full) #page-title:not(.title-bottom) { padding-bottom: calc(100px + 50px); }