@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Satisfy);
@font-face {
	font-family: 'ecoicon';
	src:url('fonts/ecoicons/ecoicon.eot');
	src:url('fonts/ecoicons/ecoicon.eot?#iefix') format('embedded-opentype'),
		url('fonts/ecoicons/ecoicon.woff') format('woff'),
		url('fonts/ecoicons/ecoicon.ttf') format('truetype'),
		url('fonts/ecoicons/ecoicon.svg#ecoicon') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'HelveticaLTStdBoldCondensed';
    src: url('fonts/helveticaltstd-boldcond-webfont.eot');
    src: url('fonts/helveticaltstd-boldcond-webfontd41d.eot?#iefix') format('embedded-opentype'),
         url('fonts/helveticaltstd-boldcond-webfont.woff') format('woff'),
         url('fonts/helveticaltstd-boldcond-webfont.ttf') format('truetype'),
         url('fonts/helveticaltstd-boldcond-webfont.svg#HelveticaLTStdBoldCondensed') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'HelveticaLTStdCondensed';
    src: url('fonts/helveticaltstd-cond-webfont.eot');
    src: url('fonts/helveticaltstd-cond-webfontd41d.eot?#iefix') format('embedded-opentype'),
         url('fonts/helveticaltstd-cond-webfont.woff') format('woff'),
         url('fonts/helveticaltstd-cond-webfont.ttf') format('truetype'),
         url('fonts/helveticaltstd-cond-webfont.svg#HelveticaLTStdCondensed') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ITCGaramondStdBkCnIt';
    src: url('fonts/itcgaramondstd-bkcondita-webfont.html');
    src: url('fonts/itcgaramondstd-bkcondita-webfontd41d.html?#iefix') format('embedded-opentype'),
         url('fonts/itcgaramondstd-bkcondita-webfont-2.html') format('woff'),
         url('fonts/itcgaramondstd-bkcondita-webfont-3.html') format('truetype'),
         url('fonts/itcgaramondstd-bkcondita-webfont-4.html#ITCGaramondStdBkCnIt') format('svg');
    font-weight: normal;
    font-style: normal;

}

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

}

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

}

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

}

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

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


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {

color: black;
background: white;
font-family: 'Open Sans Condensed', sans-serif;

}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

/* GENERAL */

#container {
    margin-top:0px;
    
}

body { 
/*background-image: -webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(0.7, rgb(188,188,188)),
				color-stop(1, rgb(235,235,235))
				);
background-image: -moz-linear-gradient(
						center bottom,
						rgb(188,188,188) 70%,
						rgb(235,235,235) 100%
					);

	
	background-color: #bcbcbc;*/
	
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
	font-family: 'Lato', sans-serif;
	
	color: #fff;
	background: #161616 url(../images/pattern_40.gif) top left repeat;
	overflow: hidden;
}
h1 {
	color: #FFF;
    font-size: 90px;
    font-weight: bold;
	padding-bottom: 15px;
	 font-family: 'Lato',sans-serif;
}

.dino2 h1 span{ 
	color:#92278F; font-family: 'Lato', sans-serif;
	float: left;
	
}
.dino2 h1{
	font-size: 130px;
}
.dino2 h1 span:last-child{
	float: right;
}
.dino2 .first {
	height: 149px;
	overflow: hidden;
}
.dino2 .second {
	height: 95px;
	overflow: hidden;
}
.uppercase{
	text-transform: uppercase;;
}
p + p {
	margin-top: 0px;
}
.dino2 .first p + p {
	/*margin-top: 10px;*/
}
 h2 {
	color: #FFF;
	font-size: 18px;
	font-weight: bold;
	padding: 22px 0;
	font-family: 'Lato', sans-serif;
	
}
.dino2 h2{
	font-size: 28px;
}
.dino2 h1, .dino2 h2{
	text-align:center;
}
p {	

	color: #FFF;
	font-size:18px;
	line-height:normal;
	font-weight:normal;
	text-align: justify;
}
.dino2 p{
	font-family: 'Lato', sans-serif;
	font-size: 17px;
	text-align: center;
}
.dino2 p > img{
	display: block;
    margin: 0 auto;
	max-width: 100%;
}
 .sg-content .dino2 p{
	text-align: center;
}

a{outline:none;}
a:link { color:#ff670a; font-weight:bold; text-decoration:none;
       -webkit-transition: color .3s linear;outline:none;}
a:visited { color:#079ede; text-decoration:none;outline:none;}
a:hover { text-decoration:none; outline:none;}
a:active { color:#ff670a; font-weight:bold; text-decoration:none;outline:none;}
a:focus { color:#079ede; text-decoration:none;outline:none;}

.bloc { 
	display:block;
	float:left;
	height:1200px;
	position:relative;
	/*width:1280px;*/
	z-index:0 !important;
}
.dino2 {
	/*background-color: black;
	background-color: rgba(0, 0, 0, 0.7);*/
    display: block;
    height: auto;
    left: 50%;
   -webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%); 
	transform: translateX(-50%);
    padding: 20px;
    position: absolute;
    top: 126px;
    width: 71%;
}
.transition {
display:block;
float:left;
height:1200px;
position:relative;
width:1000px;
z-index:0 !important;
}

/* NAV */

ul#nav {
    margin-top: 0px;
	list-style:none;
	/*padding: 20px 0;*/
	position:fixed;
	z-index:2000;
    /*width: 200px;*/
    left:0;
	right:0;
	bottom:0px;
	/*background-color: #666;*//*rgba(1, 1, 1, 0.64);*/
	/*width:100%;*/
	
}

	ul#nav li {
		float: left;
		height: 56px;
		line-height: 56px;
		text-align: center;
		width: 14.27%;
	}

		ul#nav li a {
			text-decoration:none;
			/*color: #FFFFFF;*/
			font-size: 20px;
			font-weight:bold;
			/*text-transform:uppercase;*/
           /* -webkit-transition: color .3s linear;
			-moz-transition: color .3s linear;
			transition: color .3s linear;*/
		}

		/*ul#nav li a:hover {
			color:#ff670a;
		}
		
		ul#nav li .active {
			color:#ff670a;
		}*/
		
/*.block-menu {
	display: block;
	background: #000;
}

.block-menu li {
	display: inline-block;
}*/

.block-menu li a {
	color: transparent;
	display: block;
	text-decoration: none;
	
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-transform: uppercase;
	overflow: visible;
	line-height: 25px;
	font-size: 24px;
	padding: 16px 10px;
}

/* animation domination */
.three-d {
	-webkit-perspective: 200px;
	-moz-perspective: 200px;
	perspective: 200px;
	-webkit-transition: all .07s linear;
	-moz-transition: all .07s linear;
	transition: all .07s linear;
	position: relative;
}

.three-d:not(.active):hover {
	cursor: pointer;
	color:transaprent;
}

.three-d:not(.active):hover .three-d-box, 
.three-d:not(.active):focus .three-d-box {
	-moz-transform: translateZ(-25px) rotateX(90deg);
	-webkit-transform: translateZ(-25px) rotateX(90deg);
	-o-transform: translateZ(-25px) rotateX(90deg);
	transform: translateZ(-25px) rotateX(90deg);
}
.three-d:hover .three-d-box .back, 
.three-d:active .three-d-box .back,
.three-d:focus.three-d-box .back{
	background:rgba(153, 153, 153, 0.69);/*#999;*/
	opacity:1;
}
.three-d.active .three-d-box .front {
	background: #999;
}
.three-d-box {
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
	-webkit-transform: translatez(-25px);
	-moz-transform: translatez(-25px);
	-o-transform: translatez(-25px);
	transform: translatez(-25px);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.front {
	-webkit-transform: rotatex(0deg) translatez(25px);
	-moz-transform: rotatex(0deg) translatez(25px);
	-o-transform: rotatex(0deg) translatez(25px);
	transform: rotatex(0deg) translatez(25px);
	background: rgba(1, 1, 1, 0.64);/*#666;*/
}

.back {
	-webkit-transform: rotatex(-90deg) translatez(25px);
	-moz-transform: rotatex(-90deg) translatez(25px);
	-o-transform: rotatex(-90deg) translatez(25px);
	transform: rotatex(-90deg) translatez(25px);
	color: #FFE7C4;
	opacity:0;
}

.front, .back {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	
	padding: 16px 10px;
	color: white;
	pointer-events: none;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.column{
	float: left;
    width: 50%;	
	margin-top: 2%;
}

/* START */

#start { 
	background: #B061AD;/*url(../images/bg_home.jpg) no-repeat scroll left top*/
	
}
.lines{
	background: url("../images/checkered_pattern_@2X.png") repeat scroll left 0 rgba(102, 102, 102, 0.4);
	height: 503px;
	margin-top: 10%;
}
.logo {
	position:fixed; 
	left: 7px;
	top: 7px;
	z-index:1000;
}
.partners {
	position:fixed; 
	right:7px;
	top:7px;
	z-index:1000;
}

/* WORK */

#work {
	background:url(../images/bg_work.jpg) no-repeat scroll left top;
	}
	
.work_present {
	position:relative;
	left:300px;
	top:180px;
	background:url(../images/bg_workpresent.png) no-repeat;
	width:669px;
	height:464px;
	padding-top:25px;
	padding-left:31px;
}



/* ABOUT */

#about {
	background:url(../images/bg_about.jpg) no-repeat scroll top left
}

#about_present {
	background:url(../images/bg_aboutpresent.png) no-repeat top left;
	position:relative;
	width:452px;
	height:493px;
	top:208px;
	left:390px;
	padding-top:25px;
	padding-left:40px;
}

ul#present {
	width:375px;
}

ul#present li {
	
	font-size:12px;
	line-height:18px;
	padding-bottom:9px;
	
}
	ul#present li h2{
                
                color:#079ede;
                font-size:18px;
                padding-bottom:0px;
	}

	
.shortul { width:265px;}

.photo{position:absolute;
	bottom:128px;
	right:59px;
	}
	
/* CONTACT */

#contactme {
	background:url(../images/bg_contact.jpg) no-repeat scroll top left
}

.dribbble {
			position:absolute;
			width:46px;
			height:46px;
			display:block;
			right:90px;
			bottom:666px;
			}
.twitter {
	position:absolute;
	width:92px;
	height:74px;
	bottom:417px;
	left:685px;
	display:block;
		transition: margin-bottom .3s linear;
        -webkit-transition: margin-bottom .3s linear;
		-moz-transition : margin-bottom .3s linear;
}

.twitter:hover {
        margin-bottom: 15px;
}

.twitteron {
        position:absolute;
        width:101px;
        height: 41px;
        bottom: 401px;
        left: 687px;
        display: block;
}

.linkedin {
	position:absolute;
	width:59px;
	height:56px;
	bottom:497px;
	left:808px;
	display:block;
				transition: margin-bottom .3s linear;
        -webkit-transition: margin-bottom .3s linear;
		-moz-transition : margin-bottom .3s linear;
}

.linkedin:hover {
        margin-bottom: 15px;
}

.linkedinon {
        position:absolute;
        width: 59px;
        height: 20px;
        bottom: 495px;
        left: 808px;
        display: block;
}

.drop {
       position:absolute;
       width:199px;
       height:250px;
       top: 100px;
       left:550px;
       display: block;

}

#info {
	background-image:url(../images/info.png);
	width:201px;
	height:137px;
	position:absolute;
	display:block;
	right: 97px;
	bottom:530px;
}

#info2 {
	background-image:url(../images/info2.png);
	width:181px;
	height:170px;
	position:absolute;
	display:block;
	right:68px;
	bottom:360px;
}

ul.infot { 
	width:130px;
	padding-left:60px;
	padding-top:15px;
        
}

ul.infot li { 
	
	font-size:15px;
	color:#FFF;
	text-transform:uppercase;
	line-height: 4px;
	padding-left: 20px;
}

ul.infot li.big {
	
	font-size: 28px;
	line-height: 15px;
	padding-left:0px;
}

ul.infot li.town {
padding-top: 10px;
background:url(../images/glyph-town.png) no-repeat left 13px;
line-height: 22px;
}

ul.infot li.phone {
background:url(../images/glyph-phone.png) no-repeat left 4px;
line-height: 22px;
}

ul.infot li.mail {
background:url(../images/glyph-mail.png) no-repeat left 6px;
line-height: 22px;
}

ul.infot2 {
	width:114px;
	padding-top:2px;
	padding-left:64px;
}

ul.infot2 li {
	
	font-size:22px;
	color:#FFF;
	text-transform:uppercase;
	line-height: 45px;
}

ul.infot2 li.big {
	font-size:39px;
	line-height: 10px;
}

ul.infot2 li.small a {
	
	font-size:16px;
	color:#ff670a;
	text-transform: none;
	font-weight:normal;
}
ul.infot2 li.small {
	line-height: 0px;
	text-transform: none;
	text-transform: none;
	font-weight:normal;
	font-size:16px;
	padding-top: 17px;
}

/* GALLERIE */


/* root element for scrollable */
.vertical {

	/* required settings */
	position:relative;
	overflow:auto;
	/* vertical scrollers have typically larger height than width */
	width:669px;
	height:430px;
	background:url(../images/bg_workpresent.png) no-repeat;
	left:300px;
	top:180px;
	padding-left:31px;
}

.hasJS #work .vertical {
    overflow:hidden;
}

ul.lwork {
	float:left;
	width:428px;
                padding-top:20px;
}

	ul.lwork li {
		margin-bottom:10px;
		
		font-size:12px;
		color:#5b5b5b;
		line-height:16px;
	}
	ul.lwork li img {
	border: 1px solid #dcdcdc;
	}
	
	ul.lwork li:first-child {
	border: 1px solid #fff;
	display:block;
	width: 430px;
	height: 305px;
	}
	

	ul.lwork li h1 {
		color:#079ede;
		
		font-size:18px;
		text-transform:uppercase;
	}


ul.rwork {
	margin-left:20px;
	float:left;
    padding-top:20px;
}

	ul.rwork li:first-child{
		margin-bottom:20px;
	}

	ul.rwork li {
		
		font-size:10px;
		margin-bottom:4px;
		color:#5b5b5b;
	}
	
	ul.rwork li img {border:1px solid #dcdcdc;}
	ul.rwork li.bordme {border: 1px solid #fff; display:block; width: 158px; height: 112px;}

			ul.rwork li span{
				text-transform:uppercase;
				color:#079ede;
			}


.items {
	position:absolute;
	margin: 0px;
}

.item {
	font-size:12px;
	height:464px;

}

.disabled {
	visibility:hidden;
}

.next, .prev {display:none; }

.hasJS #work .next {
	position:absolute;
        background: url(../images/next.png) no-repeat;
        height: 41px;
        width: 41px;
        text-indent: -9999px;
        z-index: 3;
        top:590px;
	left:595px;
        display:block;
        cursor: pointer;
}

.hasJS #work .next:hover {
        background-position: left 100%;
}

.hasJS #work .prev {
        position:absolute;
        background: url(../images/prev.png) no-repeat;
        height: 41px;
        width: 41px;
        text-indent: -9999px;
        z-index: 3;
        top: 160px;
	left:595px;
        display:block;
        cursor: pointer;
}

.hasJS #work .prev:hover {
       background-position: left 100%;
}

.work_ext {
        text-transform: lowercase;
}

ul.rwork .counter {
        font-size: 15px;
        margin-top: 79px;
        text-align: right;
        
        color: #079ede;
}

/* CONTACT FORM */

#mask {
background-color:#000;
display:none;
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
z-index:9000;
}

#contact {
background-color:#fff;
display:block;
left:50%;
margin-left:-136px;
position:absolute;
top:130px;
width:272px;
z-index:9999;
padding:20px;
padding-top:10px;
padding-bottom: 10px;
}

.hasJS #contactme #contact {
    display:none;
}

#close {
cursor:pointer;
font-family:arial, sans-serif;
font-size:15px;
color: #ff670a;
font-weight:normal;
line-height:24px;
text-align:right;
padding:0px;
}

/* FORM COMPONENTS */

input,textarea {
border:1px solid silver;
background-color:#fff;
color:#079ede;
font-size:12px;
font-family: Arial, sans-serif;
text-transform:none;
margin:10px 0;
padding:10px;
-webkit-transition: background-color .3s linear;
}

input:hover[type=text],input:focus[type=text],textarea:hover,textarea:focus {
background-color:#E0E0E0;
border:1px solid #000;
}

input[type=text],textarea {
width:250px;
}

.reduce {padding:0; margin:0; margin-top: 2px;}

#submit {
border:none;
width:41px;
height:41px;
background-image:url(../images/send.png);
text-indent: -9999px;
}

#submit:hover {
border:none;
width:41px;
height:41px;
background-image:url(../images/sendh.png);
text-indent: -9999px;
cursor:pointer;
}

/* ALERT MESSAGE */

.success,.error {
color:#FFF;
display:none;
font-size:10px;
font-weight:normal;
padding:5px 10px 5px 10px;
margin-bottom: 0px;
}

.success {
background-color:#ccc;
border:1px solid silver;
}

.error {
background-color:#079ede;
border:0px;
}

#tweet {
  position:absolute;
  top:150px;
  left:397px;
  padding-left:37px;
  padding-top:5px;
  width: 439px;
  display:block;
  height:70px;
  background:url(../images/twitter-bg.png) no-repeat;
  
}

#tweet ul li {
  line-height: 17px;
 
  font-size: 12px;
  color:#04628a;
  width: 375px;
  text-shadow: 0px 1px 0px #5ac3ef;
}

#tweet ul li a {
text-shadow:none;
color:#fff;
font-weight:normal;
}

.hi-icon-wrap {
	bottom: 8%;
    left: 0;
    margin: 0 auto;
    padding: 0 0 0;
    position: fixed;
    right: 0;
    text-align: center;
	z-index:1000;
}

.hi-icon {
	display: inline-block;
	font-size: 0px;
	cursor: pointer;
	/*margin: 15px 30px;*/
	margin: 15px 3%;
	width: 8%;
	/*height: 130px;*/
	border-radius: 50%;
	text-align: center;
	position: relative;
	z-index: 1;
	color: #fff;
}

.hi-icon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;
}

.hi-icon:before {
	font-family: 'ecoicon';
	speak: none;
	font-size: 48px;
	line-height: 138px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	display: block;
	-webkit-font-smoothing: antialiased;
}

.hi-icon-mobile:before {
	content: "\e009";
}
.hi-icon-pear:before {
	background: url("../images/home.png") no-repeat scroll 50% 50% transparent;
    content: "";
    height: 100%;
    width: 100%;
	padding-bottom: 100%;
}
.hi-icon-person:before {
	background: url("../images/person.png") no-repeat scroll 50% 50% transparent;
    content: "";
    height: 100%;
    width: 100%;
	padding-bottom: 100%;
}
.hi-icon-ruler:before {
	background: url("../images/machine.png") no-repeat scroll 50% 50% transparent;
    content: "";
    height: 100%;
    width: 100%;
	padding-bottom: 100%;
}
.hi-icon-machine:before {
	background: url("../images/comp.png") no-repeat scroll 50% 50% transparent;
    content: "";
    height: 100%;
    width: 100%;
	padding-bottom: 100%;
}
.hi-icon-comp:before {
	background: url("../images/table.png") no-repeat scroll 50% 50% transparent;
    content: "";
    height: 100%;
    width: 100%;
	padding-bottom: 100%;
}
.hi-icon-table:before {
	background: url("../images/promo.png") no-repeat scroll 50% 50% transparent;
    content: "";
    height: 100%;
    width: 100%;
	padding-bottom: 100%;
}
.hi-icon-office:before {
	background: url("../images/office.png") no-repeat scroll 50% 50% transparent;
    content: "";
    height: 100%;
    width: 100%;
	padding-bottom: 100%;
}

.hi-icon-screen:before {
	content: "\e00a";
}

.hi-icon-earth:before {
	content: "\e002";
}

.hi-icon-support:before {
	content: "\e000";
}

.hi-icon-locked:before {
	content: "\e001";
}

.hi-icon-cog:before {
	content: "\e003";
}

.hi-icon-clock:before {
	content: "\e004";
}

.hi-icon-videos:before {
	content: "\e005";
}

.hi-icon-list:before {
	content: "\e006";
}

.hi-icon-refresh:before {
	content: "\e007";
}

.hi-icon-images:before {
	content: "\e008";
}

.hi-icon-pencil:before {
	content: "\e00b";
}

.hi-icon-link:before {
	content: "\e00c";
}

.hi-icon-mail:before {
	content: "\e00d";
}

.hi-icon-location:before {
	content: "\e00e";
}

.hi-icon-archive:before {
	content: "\e00f";
}

.hi-icon-chat:before {
	content: "\e010";
}

.hi-icon-bookmark:before {
	content: "\e011";
}

.hi-icon-user:before {
	content: "\e012";
}

.hi-icon-contract:before {
	content: "\e013";
}

.hi-icon-star:before {
	content: "\e014";
}

.hi-icon-effect-5 .hi-icon {
	box-shadow: 0 0 0 4px rgba(255,255,255,1);
	overflow: hidden;
	-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
	-moz-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
	transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.hi-icon-effect-5 .hi-icon:after {
	display: none;
}

.no-touch .hi-icon-effect-5 .hi-icon:hover {
	background: rgba(255,255,255,1);
	color: #702fa8;
	box-shadow: 0 0 0 8px rgba(255,255,255,0.3);
}

.no-touch .hi-icon-effect-5a .hi-icon:hover:before {
	-webkit-animation: toRightFromLeft 0.3s forwards;
	-moz-animation: toRightFromLeft 0.3s forwards;
	animation: toRightFromLeft 0.3s forwards;
}

@-webkit-keyframes toRightFromLeft {
	49% {
		-webkit-transform: translate(100%);
	}
	50% {
		opacity: 0;
		-webkit-transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}
@-moz-keyframes toRightFromLeft {
	49% {
		-moz-transform: translate(100%);
	}
	50% {
		opacity: 0;
		-moz-transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}
@keyframes toRightFromLeft {
	49% {
		transform: translate(100%);
	}
	50% {
		opacity: 0;
		transform: translate(-100%);
	}
	51% {
		opacity: 1;
	}
}

.no-touch .hi-icon-effect-5b .hi-icon:hover:before,  .no-touch .hi-icon-effect-5b .hi-icon.active{
	-webkit-animation: toLeftFromRight 0.3s forwards;
	-moz-animation: toLeftFromRight 0.3s forwards;
	animation: toLeftFromRight 0.3s forwards;
}

@-webkit-keyframes toLeftFromRight {
	49% {
		-webkit-transform: translate(-100%);
	}
	50% {
		opacity: 0;
		-webkit-transform: translate(100%);
	}
	51% {
		opacity: 1;
	}
}
@-moz-keyframes toLeftFromRight {
	49% {
		-moz-transform: translate(-100%);
	}
	50% {
		opacity: 0;
		-moz-transform: translate(100%);
	}
	51% {
		opacity: 1;
	}
}
@keyframes toLeftFromRight {
	49% {
		transform: translate(-100%);
	}
	50% {
		opacity: 0;
		transform: translate(100%);
	}
	51% {
		opacity: 1;
	}
}

.no-touch .hi-icon-effect-5c .hi-icon:hover:before {
	-webkit-animation: toTopFromBottom 0.3s forwards;
	-moz-animation: toTopFromBottom 0.3s forwards;
	animation: toTopFromBottom 0.3s forwards;
}

@-webkit-keyframes toTopFromBottom {
	49% {
		-webkit-transform: translateY(-100%);
	}
	50% {
		opacity: 0;
		-webkit-transform: translateY(100%);
	}
	51% {
		opacity: 1;
	}
}
@-moz-keyframes toTopFromBottom {
	49% {
		-moz-transform: translateY(-100%);
	}
	50% {
		opacity: 0;
		-moz-transform: translateY(100%);
	}
	51% {
		opacity: 1;
	}
}
@keyframes toTopFromBottom {
	49% {
		transform: translateY(-100%);
	}
	50% {
		opacity: 0;
		transform: translateY(100%);
	}
	51% {
		opacity: 1;
	}
}

.no-touch .hi-icon-effect-5d .hi-icon:hover:before {
	-webkit-animation: toBottomFromTop 0.3s forwards;
	-moz-animation: toBottomFromTop 0.3s forwards;
	animation: toBottomFromTop 0.3s forwards;
}

@-webkit-keyframes toBottomFromTop {
	49% {
		-webkit-transform: translateY(100%);
	}
	50% {
		opacity: 0;
		-webkit-transform: translateY(-100%);
	}
	51% {
		opacity: 1;
	}
}
@-moz-keyframes toBottomFromTop {
	49% {
		-moz-transform: translateY(100%);
	}
	50% {
		opacity: 0;
		-moz-transform: translateY(-100%);
	}
	51% {
		opacity: 1;
	}
}
@keyframes toBottomFromTop {
	49% {
		transform: translateY(100%);
	}
	50% {
		opacity: 0;
		transform: translateY(-100%);
	}
	51% {
		opacity: 1;
	}
}
@media screen and (max-width: 1214px) {
	ul#nav li a {
		/*color:red;*/
	}
	.hi-icon {
		margin: 15px 1%;
	}
	ul#nav {
		background-color: rgba(1, 1, 1, 0.64);
		bottom: 0;
		left: 0;
		list-style: none outside none;
		margin-top: 0;
		position: fixed;
		right: 0;
		text-align: center;
		z-index: 2000;
	}
	ul#nav li {
		display: inline-block;
		float: none;
		height: 56px;
		line-height: 56px;
		margin: 0 auto;
		text-align: center;
		width: 12.285%;
	}
}
@media screen and (max-width: 800px) {

	.hi-icon {
		margin: 15px !important;
	}

	.container > section {
		padding: 20em 1em;
	}

}

@media screen and (max-width: 25em) {

	.codrops-icon span {
		display: none;
	}

}



/*#preloader { 
	width:100%; 
	height:5px;  
	background:#000;
	top:50%;
	position:absolute;
	
}

.expand { 
	width:100%; 
	height:1px; 
	margin:2px 0; 
	background:#92278F; 
	position:absolute;
	box-shadow:0px 0px 10px 1px rgba(146, 39, 143, 0.7);
    -moz-animation:fullexpand 2000ms cubic-bezier(1.000, 0.610, 0.970, 0.000); 
	-webkit-animation:fullexpand 2000ms cubic-bezier(1.000, 0.610, 0.970, 0.000);
}*/
.pt-perspective {display:none;}
.pt-perspective, .logo, .partners, .block-menu, .hi-icon{visibility:hidden;}
@-moz-keyframes fullexpand {
	0%  { width:0px;}
	100%{ width:100%;}	
}
@-webkit-keyframes fullexpand {
	0%  { width:0px;}
	100%{ width:100%;}	
}
/*.pt-perspective, .logo, .partners, .block-menu, .hi-icon{visibility:hidden;}*/
#loaderMask{
	text-align: center;
	/*padding-top: 20%;*/
	position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index: 9999;
	background-image: url("../images/pattern_40.gif");
    overflow: hidden;
	color:#92278F;
}
#loaderMask span{
	font-size: 40px;
	position: absolute;
	top: 50%;
	margin-top: -60px;
	left: 50%;
	margin-left: -50px;
	width: 100px;
	text-align: center;
}
#qLbar {
	
	height: 1px;
	color: #FFFFFF;
    font-family: 'Lato',sans-serif;
	margin:2px 0; 
	background:#92278F; 
	position:absolute;
	box-shadow:0px 0px 10px 1px rgba(146, 39, 143, 0.7);
}
#loader_container{
	width: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -100px;
	height: 60px;
	padding-top: 8px;
}
#loader_overlay{
	position: absolute;
	width:0;
	height: 105%;
	top: 0;
	box-shadow:0px 0px 10px 1px rgba(146, 39, 143, 0.7);
	background:#92278F;
	z-index: -1;
}
.pull-down{
	display: inline-block;
    margin-top: 9px;
}
@media screen and (max-height: 715px) {
 	.dino2 {
 		top: 46px;
 	}
}