/***************************************************/
/********************** GERAL **********************/
/***************************************************/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);

@font-face		{ font-family: 'fontello'; src: local(fontello), url('../fonts/fontello/font/fontello.woff') format('woff'); }
@font-face		{ font-family: bauhaus; src: local(bauhaus), url('../fonts/ufonts.com_bauhaus-93.ttf') format('opentype'); }

body											{ margin:0; color:#000; height: 100%; background:#fff; font-weight: 400; }
html											{ height: 100%; }

*												{ outline:none; -webkit-font-smoothing: antialiased; font-size: 14px; letter-spacing: 1px; font-family: 'Open Sans'; }
img												{ border:0px; }
form											{ margin:0px; padding:0px; }

.l												{ float:left; }
.r												{ float:right; }
.b,b,strong										{ font-weight: 700; }
.hide											{ display:none; }
.clear											{ clear:both; }
.clear.spacer									{ height: 60px; }
.clear.minSpacer								{ height: 30px; }
.color											{ color:#00afef; }
.warningBox										{ padding: 50px; background: #f1f1f1; text-align: center; text-transform: uppercase; letter-spacing: 2px; }
.forceSquare									{ width: 100%; height: auto; }
.marginSide										{ padding: 0 20px; }
.submitmyform									{ cursor: pointer; }
.pointer										{ cursor: pointer; }


.fifth											{ position: relative; width: 20%; }
.quarter										{ position: relative; width: 25%; }
.thirth											{ position: relative; width: 33%; }
.thirth.middle									{ position: relative; width: 33%; padding: 0 0.5%; }
.twothirth										{ position: relative; width: 67%; }
.half											{ position: relative; width: 50%; }
.threequarter									{ position: relative; width: 75%; }
.full											{ position: relative; width: 100%; }


a:link											{ text-decoration: none; color:#000; transition: color 0.2s; }
a:visited										{ text-decoration: none; color:#000; transition: color 0.2s; }
a:hover											{ text-decoration: underline; color:#000; transition: color 0.2s; }
a:active										{ text-decoration: underline; color:#000; transition: color 0.2s; }

.groupinput .innerpadding .input									{ background: none; border: 0; outline: none; resize: none; padding: 0; margin: 0; width: 100%; background: none; }
.groupinput .innerpadding .input:focus								{  }
.groupinput .innerpadding .input::-webkit-input-placeholder			{ color:#999; }
.groupinput .innerpadding .input:focus::-webkit-input-placeholder	{ color:#b7b7b7; }
.groupinput .innerpadding .select									{ background: url('../img/bg-select-arrow.png') no-repeat right 5px center; border: none; line-height: 1; -webkit-appearance: none; cursor: pointer; border-radius: 0; }


.button,a.button								{ background: #000; border: 1px solid #fff; color: #fff; margin: 0; padding: 0; transition:border 0.2s; border-radius: 0; }
.button .innerpadding,a.button .innerpadding	{ padding-top: 10px; padding-bottom: 10px; }
.button:hover,a.button:hover					{ border-color: #000; cursor: pointer; transition:border 0.2s; }


/***************************************************/
/********************** ANIMATIONS *****************/
/***************************************************/

.animateTop										{ -webkit-transform:translateY(50px); -ms-transform:translateY(50px); transform:translateY(50px); opacity: 0; }
.animateTop.animateMe							{ -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); opacity: 1; transition: all 0.5s; }
.animateLeft									{ -webkit-transform:translateX(-30px); -ms-transform:translateX(-30px); transform:translateX(-30px); opacity: 0; }
.animateLeft.animateMe							{ -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity: 1; transition: all 0.5s; }
.animateBottom									{ -webkit-transform:translateY(-50px); -ms-transform:translateY(-50px); transform:translateY(-50px); opacity: 0; }
.animateBottom.animateMe						{ -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); opacity: 1; transition: all 0.5s; }
.animateRight									{ -webkit-transform:translateX(50px); -ms-transform:translateX(50px); transform:translateX(50px); opacity: 0; }
.animateRight.animateMe							{ -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity: 1; transition: all 0.5s; }
.animatePaddTop									{ padding-top: 30px; opacity: 0; }
.animatePaddTop.animateMe						{ padding-top: 0; opacity: 1; transition: all 0.3s; }
.animateFade									{ opacity: 0; }
.animateFade.animateMe							{ opacity: 1; transition: all 1s; }


/***************************************************/
/********************** MENUS **********************/
/***************************************************/

.mainmenu								{ position: relative; float: right; overflow: hidden; z-index: 0; transition: width 0.2s linear 1s; }
.mainmenu>.link							{ position: relative; float: left; text-transform: uppercase; transition: all 1s; cursor: pointer; }
.mainmenu>.link .innerpadding			{ padding: 25px 20px; color: rgba(255,255,255,0.8); text-align: center; font-size: 14px; font-weight: 600; transition: color 0.2s; }
.mainmenu>.link:hover					{ text-decoration: none; }
.mainmenu>.link .innerpadding:hover		{ color: #fff; text-shadow: 0 0 10px #000; transition: color 0.2s; }

.mainmenu>.link.separator .innerpadding{ padding: 5px 10px; padding-left: 0; margin: 20px 0; border-left: 1px solid rgba(255,255,255,0.4); width: 0px; overflow: hidden; }
.mainmenu>.link.select-lang .innerpadding{ padding-left: 10px; padding-right: 10px; }

.mMenu{ display: none; background: #000; padding-top: 70px; }
.mMenu .mainmenu{ width: 100%; float: none; }
.mMenu .mainmenu>.link { width: 100%; text-align: center; float: none; }

.mMenu .mainmenu>.link.separator .innerpadding{ padding: 0; margin: 0; border: none; border-top: 1px solid rgba(255,255,255,0.1); width: 100%; height: 0; overflow: hidden; }
.mMenu .mainmenu>.link.select-lang .innerpadding{ padding-top: 10px; padding-bottom: 10px; }

.openMenu										{ position:relative; float:right; width:33px; height:33px; margin: 15px 20px; cursor:pointer; }
.openMenu .path									{ position:absolute; left:4px; right:4px; height:3px; background:#fff; }
.openMenu .path:nth-of-type(1)					{ top:8px; transition-property: all,top; transition-duration: 0.2s,0.2s; transition-delay: 0s,0.2s; }
.openMenu .path:nth-of-type(2)					{ top:15px; opacity:1; transition-property: opacity; transition-duration: 0s; transition-delay: 0.2s; }
.openMenu .path:nth-of-type(3)					{ bottom:8px; transition-property: all,bottom; transition-duration: 0.2s,0.2s; transition-delay: 0s,0.2s; }
.openMenu.open .path:nth-of-type(1)				{ transform: rotate(45deg); -webkit-transform: rotate(45deg); top:15px; transition-property: all,top; transition-duration: 0.2s,0.2s; transition-delay: 0.2s,0s; }
.openMenu.open .path:nth-of-type(2)				{ opacity:0; transition-property: opacity; transition-duration: 0s; transition-delay: 0.2s; }
.openMenu.open .path:nth-of-type(3)				{ transform: rotate(4-5deg); -webkit-transform: rotate(-45deg); bottom:15px; transition-property: all,bottom; transition-duration: 0.2s,0.2s; transition-delay: 0.2s,0s; }


/***************************************************/
/********************* CONTENT *********************/
/***************************************************/

.aligncenter									{ position: relative; width: 100%; max-width: 1280px; margin: 0 auto; }
.absmiddle										{ position: absolute; left: 0; width: 100%; top: 50%; text-align: center; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); }
.innerpadding									{ padding: 20px; }
.innerpadding.removesides						{ padding-left: 0; padding-right: 0; }
.innerpadding.removetops						{ padding-top: 0; padding-bottom: 0; }

.aligncenter img{ max-width: 100%; height: auto; }

header{ position: fixed; left: 0; top: 0; right: 0; z-index: 1; transition: background 0.2s; z-index: 999999999999; }
header.bg-black{ background: rgba(0,0,0,0.9); transition: background 0.2s; }
header .logo{ text-align: justify; color: #fff; opacity: 1; transition: opacity 0.2s; text-decoration: none; }
header .logo .innerpadding{ padding-top: 17px; padding-bottom: 23px; }
header .logo span{ color: #ed1d29; font-family: 'bauhaus'; font-size: 40px; line-height: 30px; text-shadow: 0 0 2px #000; transition: all 0.2s; }
header .logo:hover span{ text-shadow: 0 0 5px #000; transition: all 0.2s; }
/* header.bg-black .logo{ opacity: 1; transition: opacity 0.2s; } */


h1{ font-family: 'Open Sans Condensed'; font-weight: 300; font-size: 50px; margin-top: 0; margin-bottom: 15px; line-height: 40px; }
h2{ font-family: 'Open Sans Condensed'; font-weight: 300; font-size: 40px; margin-top: 0; margin-bottom: 30px; line-height: 40px; }
h3{ font-family: 'Open Sans Condensed'; font-weight: 300; font-size: 30px; margin-top: 0; margin-bottom: 15px; line-height: 30px; }


.homepage{ position: relative; width: 100%; height: 500px; background: #000; z-index: 0; }
.homepage .slider{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.homepage .slider .elem{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.25; background-repeat: no-repeat; }
.homepage .slider .elem .filter{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; }
.homepage .info{ position: absolute; left: 0; bottom: 40px; width: 100%; color: #fff; font-weight: 300; }

.homepage .info *{ font-family: 'Open Sans Condensed'; font-weight: 300; line-height: 1.1em; margin: 0; font-size: 50px; }
.homepage .info>.aligncenter{ margin: 0 auto; }

.homepage .info .logo{ text-align: justify; color: #fff; font-weight: 300; float: left; font-size: 12px; width: 172px; }
.homepage .info .logo span{ color: #ed1d29; font-family: 'bauhaus'; font-size: 90px; line-height: 100px; text-shadow: 0 0 2px #000; transition: all 0.2s; }

.homepage .arrow{ position: absolute; top: 0; bottom: 0; width: 10%; z-index: 9999999; cursor: pointer; text-align: center; padding-top: 245px; color: #fff; }
.homepage .arrow.prev{ left: 0; }
.homepage .arrow.next{ right: 0; }
.homepage .arrow i{ font-size: 2em; transition: margin 0.2s; }

.homepage .arrow.prev:hover i{ margin-right: 10px; transition: margin 0.2s; }
.homepage .arrow.next:hover i{ margin-left: 10px; transition: margin 0.2s; }


.bg-grey{ background: #e6e7e8; }

.bg-red{ background: #c74b3a; color: #fff; }

.bg-red.bg1color{ background: #e6e7e8; color: #000; }
.bg-red.bg2color{ background: #ffffff; color: #000; }
.bg-red.bg3color{ background: #b1b1b1; color: #000; }

.bg-red>.aligncenter>.innerpadding{ padding-top: 60px; padding-bottom: 60px; }
/*
.bg-red a:link{ text-decoration: none; color:#fff; transition: color 0.2s; }
.bg-red a:visited{ text-decoration: none; color:#fff; transition: color 0.2s; }
.bg-red a:hover{ text-decoration: none; color:#000; transition: color 0.2s; }
.bg-red a:active{ text-decoration: none; color:#000; transition: color 0.2s; }
*/


.services{ position: relative; border-bottom: 1px solid #000; }
.services .image{ width: 47%; }

.services .image .img{ width: calc(50% - 1px); height: 350px; border-left: 1px solid #fff; background-color: #f1f1f1; }
.services .image .img.single{ width: 100%; border: 0; }

.services .info{ width: 53%; }
.services:nth-child(even) .image{ float: left; }
.services:nth-child(even) .info{ float: right; }


.projects{ text-align: center; }
.projects .elem>.innerpadding{ padding: 5px; }

.projects h1{ text-align: left; margin: 0; padding-bottom: 20px; }

.projects .group-projects{ margin: 0 -5px; }
.projects .elem{ position: relative; display: inline-block; /* border-bottom: 1px solid #fff; */ }
.projects .elem .info{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); color: #fff; opacity: 0; transition: opacity 0.2s; }
.projects .elem .info .innerpadding{ padding: 10px; }
.projects .elem:hover .info{ opacity: 1; transition: opacity 0.2s; }

.mobile .projects .elem .info{ opacity: 1; }



.projects .group-projects .project_category_wrapper { display: flex; align-items: flex-start; align-items: center; justify-content: center; background: #c5c5c5; width: calc(99% - 10px); margin: 10px auto; }
.projects .group-projects .project_category_wrapper .project_category {
	padding: 10px 30px;
	color: #666;
	font-size: 30px;
    font-weight: 600;
    max-width: 275px;
}
.projects .group-projects .project_category_wrapper .project_category:hover { cursor: pointer; color: #555; }
.projects .group-projects .project_category_wrapper .project_category.active { color: #000; }
.projects .group-projects .project_category_wrapper .project_category sup { font-size: 14px; font-weight: 600; margin-left: -5px; }


/* CONTACTS */
.map											{ position: relative; width: 100%; height: 500px; z-index: 0; }
.contactform .dialog							{ margin-bottom: 10px; }
.contactform .dialog.notes .innerpadding		{ padding: 10px 18px; }
.contactform h1									{ padding-left: 10px; }
.contactform .groupinput						{ margin-bottom: 0; }
.contactform .groupinput.captcha				{ padding-top: 10px; }
.contactform .groupinput p						{ margin-bottom: 5px; padding-left: 10px; }
.contactform .groupinput .innerpadding			{ border: none; border: 1px solid #c1c1c1; padding: 10px; /* border-radius: 30px; */ background: #fff; }
.contactform .groupinput.l .innerpadding		{ margin-right: 5px; }
.contactform .groupinput.r .innerpadding		{ margin-left: 5px; }
.contactform .groupinput.textarea .input		{ height: 100px; }
.contactform .button							{ width: 100%; /* border-radius: 30px; */ text-align: center; text-transform: uppercase; margin-top: 10px; border: 0; background: #222; transition: background 0.2s; }
.contactform .button:hover{ background-color: #000; transition: background 0.2s; }


footer{ background: #111; color: #fff; }
footer *{ font-size: 12px; }
footer .innerpadding{ padding-top: 10px; padding-bottom: 10px; }
footer img{ vertical-align: middle; }

/* LOGIN AREA */
.loginform .newregist .groupinput.l .innerpadding		{ margin-right: 5px; }
.loginform .newregist .groupinput.r .innerpadding		{ margin-left: 5px; }
.loginform .newregist .half.l .groupinput .innerpadding	{ margin-right: 5px; }
.loginform .newregist .half.r .groupinput .innerpadding	{ margin-left: 5px; }
.loginform .newregist .groupinput .select				{ width: 100%; padding: 3px 0; padding-right: 25px; background-color: #fff; }
.loginform .dialog										{ margin-bottom: 10px; }
.loginform .button										{ border-width: 2px; margin: 0; }


/* SCROLL */
.jspContainer									{ overflow:hidden; position:relative; }
.jspPane										{ position:absolute; }
.jspVerticalBar									{ position: absolute; top: 0; right: 0; width: 6px; height: 100%; padding: 2px; }
.jspHorizontalBar								{ position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; }
.jspVerticalBar *,
.jspHorizontalBar *								{ margin: 0; padding: 0; }
.jspCap											{ display: none; }
.jspHorizontalBar .jspCap						{ float: left; }
.jspTrack										{ background:none; position: relative;  }
.jspDrag										{ background:#1c1c1c; position: relative; box-shadow: 0 0 3px #000; top: 0; left: 0; cursor: pointer; }
.jspDrag:hover									{ background-position:center right; }
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag						{ float: left; height: 100%; }
.jspArrow										{ background: #50506d; text-indent: -20000px; display: block; cursor: pointer; }
.jspArrow.jspDisabled							{ cursor: default; background: #80808d; }
.jspVerticalBar .jspArrow						{ height: 5px; }
.jspHorizontalBar .jspArrow						{ width: 5px; float: left; height: 100%; }
.jspVerticalBar .jspArrow:focus					{ outline: none; }
.jspCorner										{ background: #eeeef4; float: left; height: 100%; }
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner								{ margin: 0 -3px 0 0; }




/* Tooltips */
.tipsy { padding: 5px; font-size:13px; position: absolute; z-index: 100000; }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-inner { /* border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; */ font-size: 12px; }
.tipsy-arrow { position: absolute; background: url('../img/tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }



/* Messages */
.dialog						{ color: #000; font-size: 14px; }
.dialog .innerpadding		{ padding: 10px; }
.dialog.done .innerpadding	{ border: 2px solid #ceef73; background: rgba(206,239,115,0); }
.dialog.error .innerpadding	{ border: 2px solid #ef7373; background: rgba(239,155,115,0); }
.dialog.notes .innerpadding	{ border: 2px solid #73b3ef; background: rgba(115,179,239,0); }
.dialog li					{ margin-left: 20px; }
.dialog p					{ margin-left: 0; }


/* Parallax */
.parallaxImage									{ position: relative; width: 100% !important; height: 330px; margin: 0; padding: 0; overflow: hidden; z-index: 2; }
.parallaxImage .randomImage						{ position: absolute; left:0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-attachment:fixed; background-position:50% 0; opacity: 1; }