@font-face {
	font-family: 'DINPro-Light';
	src: url('font/DINPro-Light.eot?') format('eot'), 
	     url('font/DINPro-Light.otf')  format('opentype'),
	     url('font/DINPro-Light.woff') format('woff'), 
	     url('font/DINPro-Light.ttf')  format('truetype'),
	     url('font/DINPro-Light.svg#DINPro-Light') format('svg');
}

@font-face {
	font-family: 'DINPro-Regular';
	src: url('font/DINPro-Regular.eot?') format('eot'), 
	     url('font/DINPro-Regular.otf')  format('opentype'),
	     url('font/DINPro-Regular.woff') format('woff'), 
	     url('font/DINPro-Regular.ttf')  format('truetype'),
	     url('font/DINPro-Regular.svg#DINPro-Regular') format('svg');
}

@font-face {
	font-family: 'DINPro-Bold';
	src: url('font/DINPro-Bold.eot?') format('eot'), 
	     url('font/DINPro-Bold.otf')  format('opentype'),
	     url('font/DINPro-Bold.woff') format('woff'), 
	     url('font/DINPro-Bold.ttf')  format('truetype'),
	     url('font/DINPro-Bold.svg#DINPro-Bold') format('svg');
}


@font-face {
    font-family: 'dinregular';
    src: url('font/din-webfont.eot');
    src: url('font/din-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/din-webfont.woff') format('woff'),
         url('font/din-webfont.ttf') format('truetype'),
         url('font/din-webfont.svg#dinregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'dinbold';
    src: url('font/din_bold-webfont.eot');
    src: url('font/din_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/din_bold-webfont.woff') format('woff'),
         url('font/din_bold-webfont.ttf') format('truetype'),
         url('font/din_bold-webfont.svg#dinbold') format('svg');
    font-weight: normal;
    font-style: normal;

}


h1{
	font-size: 18px;
	line-height:26px;
	margin-bottom: 15px; 
}

h1,h2,h3,h4,h5,h6{
	color: #000;
	margin-top: 0;
}



ul{
	padding: 0;
}

ul li{
	list-style-type: none;
}


html, body {
}

body {
	 line-height: 20px;
	word-spacing: 0.18em;
	letter-spacing: 0.01em;
	 font-size: 12px;
	 font-family: dinregular, arial;
	 color: #666;
	 
	margin: 0;
	padding-top: 40px;
}

	
	a, a:hover{
		color: #666;
	    text-decoration: none;
	}
	



b{
		 font-family: dinbold, arial;
}

p{
	margin-bottom: 15px;
	line-height: 20px;
}


button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 1px dotted transparent;
}

button:focus::-moz-focus-inner,
input[type="reset"]:focus::-moz-focus-inner,
input[type="button"]:focus::-moz-focus-inner,
input[type="submit"]:focus::-moz-focus-inner,
input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
    padding: 3px;
    border-color: #F3F3F3;
}

/*************************template*************************************/


.boxSide {
  display: table;
  padding: 0 1.25em;
  width: 100%;
}
.box {
  display: table;
  padding: 1.25em;
  width: 100%;
}
.smallBox {
  display: table;
  padding: 0.625em;
  width: 100%;
}

.margin-top {
  margin-top: 1.25em;
}

.margin-top2 {
  margin-top: 2.5em;
}

.margin-top3 {
  margin-top: 4em;
}


.margin-bottom {
  margin-bottom: 1.25em;
}

.margin-bottom2 {
  margin-bottom: 2.5em;
}

.margin-bottom3 {
  margin-bottom: 4em;
}


.margin-top-bottom {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.margin-top-bottom2 {
  margin-top: 2.5em;
  margin-bottom: 2.5em;
}

.margin-top-bottom4 {
  margin-top: 4em;
  margin-bottom: 4em;
}

.margin-right {
  margin-right: 1.25em;
}
.margin-left {
  margin-left: 1.25em;
}
.margin2-left-right {
  margin-right: 0.625em;
  margin-left: 0.625em;
}
.smargin-left-right {
  margin-right: 5px;
  margin-left: 5px;
}

.padding-top-bottom {
  padding-top: 1.25em;
  padding-bottom: 1.25em;
}


.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}


.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;}  /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}



.scrollup{
	width:35px;
	height:35px;			
	text-indent:-9999px;
	opacity:0.85;
	position:fixed;
	bottom:80px;
	right:20px;
	display:none;			
    background: transparent url('../images/navigation_icon-09.png') no-repeat;
}


/*********************** close button ***********************/
.searchField{
	border: none;
	width: 100px;
	padding: 0 0 0 0;
	line-height: 14px;
}


/*********************** close button ***********************/

.closeButton{
  margin-top: -100px;
  width: 32px;
  height: 32px;
  background: transparent url('../images/close.png') no-repeat;
	right: 0;
	top: 0;
	position: absolute;
	cursor: pointer;
}



/*********************** show transition ***********************/


.lineIn a:after {
	content: '';
	display: block;
	height: 1px;
	width: 0px;
	background: #000;
	transition: all .5s ease;
}
.lineIn a.active:after, .lineIn a:hover:after {
	width: 100%;
}

.movedIn{
    margin: 0 !important;
    opacity: 1 !important;
    -webkit-transition: all .6s ease-in-out !important;
    -moz-transition: all .6s ease-in-out !important;
    transition: all .6s ease-in-out !important;
}


.effect-rotate:hover{
	transform:rotate(720deg);
	-ms-transform:rotate(720deg); /* IE 9 */
	-webkit-transform:rotate(720deg); /* Opera, Chrome, and Safari */
	-webkit-transition: 0.4s ease;
	-ms-transition: 0.4s ease;
	transition: 0.4s ease;
}

img.grayscale{
	
-webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%); 
	
	
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%); /* For Webkit browsers */
	filter: gray; /* For IE 6 - 9 */
	-webkit-transition: all .5s ease; /* Fade to color for Chrome and Safari */
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
}

.activeProject img, img.grayscale:hover{
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}



/*************** footer to bottom*****************/
html, body {
	height: 100%;
	margin:0;
	padding:0;
}

.wrapper {
	min-height: 100%;
	position:relative;
	/*padding-bottom: 100px;*/

}

section{
	padding-bottom:80px;
}


footer {
	width:100%;
	height:50px;
	position:absolute;
	bottom:0;
	left:0;
}



/*************** separator link*****************/


.separatorLink a:after {
	content: "|";
	padding: 0 7px;
}

.separatorLink a:last-child:after {
	content: "";
}

/*************** responsive*****************/


@media (max-width: 1280px) {

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

}



@media (max-width: 768px) {
	.container{
		padding-right: 5px;
		padding-left: 5px;
	}


}