@import url(http://fonts.googleapis.com/css?family=Lato:300);
@import url(http://fonts.googleapis.com/css?family=Lato);
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

.padding-top{
	padding-top:50px;
}

.padding-top1{
	padding-top:30px;
}

.padding-bottom{
	padding-bottom:50px;
}

.padding-bottom1{
	padding-bottom:30px;
}

.line-sep{
	border-bottom:1px solid rgba(41,41,41,.1);
	padding-top:40px;
	margin-bottom:20px;
}

.line-sep1{
	border-bottom:1px solid rgba(41,41,41,.1);
	padding-top:20px;
	margin-bottom:40px;
}

.line-sep2{
	border-bottom:1px solid rgba(41,41,41,.1);
	padding-top:40px;
	margin-bottom:40px;
    position: relative;
}

.line-sep3{
	border-bottom:1px solid rgba(41,41,41,.1);
	padding-top:40px;
	margin-bottom:30px;
    position: relative;
}

/* #MENU
================================================== */
#nav-menu{
 position:fixed;
 top:0; left:0;
 z-index:3000;
	width:100%;
}

.icon-solution, .icon-home, .icon-support, .icon-products, .icon-contact, .icon-menu, 

.icon-partners
{ font-family: 'icomoon'; speak: none;
 font-style: normal; font-weight: normal;
	font-variant: normal;
 text-transform: none;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
}




.icon-home:before 	{
content: "\e600";
}


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

.icon-solution:before 	{
content: "\e602";
}


.icon-contact:before 	{
content: "\e603";
}


.icon-products:before 	{
content: "\e604";
}

.icon-partners:before 	{
content: "\e605";
}

.icon-menu:before 	{
content: "\e606";
}


a, li {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}




/* Global CSS that are applied for all screen sizes */
.nav ul {
 max-width: 100%;
 margin: 0;
 padding: 0; list-style: none; font-size: 1.2em;
 font-weight: 300;
}

.nav li span { display: block;}
.nav a {
 display: block; color: rgba(249, 249, 249, .9); text-decoration: none;
	-webkit-transition: color .5s, background .5s, height .5s;
 -moz-transition: color .5s, background .5s, height .5s; -o-transition: color .5s, background .5s, height .5s;
 -ms-transition: color .5s, background .5s, height .5s; transition: color .5s, background .5s, height .5s;
}


.nav i{
	/* Make the font smoother for Chrome */
	-webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}


/* Remove the blue Webkit background when element is tapped */
a, button {
 -webkit-tap-highlight-color: rgba(0,0,0,0);
}


/* Hover effect for the whole navigation to make the hovered item stand out */
.no-touch .nav ul:hover a { color: rgba(249, 249, 249, .5);}
.no-touch .nav ul:hover a:hover { color: rgba(249, 249, 249, 0.99);}

/* Adding some background color to the different menu items */
.nav li:nth-child(6n+1) { background: rgba(40, 40, 40,.9);}
.nav li:nth-child(6n+2) { background: rgba(45, 45, 45,.9);}
.nav li:nth-child(6n+3) { background: rgba(50, 50, 50,.9);}
.nav li:nth-child(6n+4) { background: rgba(55, 55, 55,.9);}
.nav li:nth-child(6n+5) { background: rgba(60, 60, 60,.9);}
.nav li:nth-child(6n+6) { background: rgba(65, 65, 65,.9);}

/* For screen bigger than 800px */
@media (min-width: 50em) 
{
/* Transforms the list into a horizontal navigation */
.nav li {
 float: left;
 width: 16.66666666666667%; text-align: left; -webkit-transition: border .5s;
 -moz-transition: border .5s; -o-transition: border .5s;
 -ms-transition: border .5s; transition: border .5s; }
.nav a { display: block; width: auto;}
	
/* hover, focused and active effects that add a little colored border to the different items */
.no-touch .nav li:nth-child(6n+1) a:hover, .no-touch .nav li:nth-child(6n+1) a:active,
 .no-touch .nav li:nth-child(6n+1) a:focus { border-bottom: 4px solid #EC572C;
 }
.no-touch .nav li:nth-child(6n+2) a:hover,
 .no-touch .nav li:nth-child(6n+2) a:active,
 .no-touch .nav li:nth-child(6n+2) a:focus { border-bottom: 4px solid #EC572C;
 }
.no-touch .nav li:nth-child(6n+3) a:hover,
 .no-touch .nav li:nth-child(6n+3) a:active,
 .no-touch .nav li:nth-child(6n+3) a:focus { border-bottom: 4px solid #EC572C; }
.no-touch .nav li:nth-child(6n+4) a:hover,
 .no-touch .nav li:nth-child(6n+4) a:active,
 .no-touch .nav li:nth-child(6n+4) a:focus { border-bottom: 4px solid #EC572C; }
.no-touch .nav li:nth-child(6n+5) a:hover,
 .no-touch .nav li:nth-child(6n+5) a:active,
 .no-touch .nav li:nth-child(6n+5) a:focus { border-bottom: 4px solid #EC572C; }
.no-touch .nav li:nth-child(6n+6) a:hover,
 .no-touch .nav li:nth-child(6n+6) a:active,
 .no-touch .nav li:nth-child(6n+6) a:focus { border-bottom: 4px solid #EC572C; }

	

/* Placing the icon */
.nav li span, .nav li span.icon { display: inline-block; }	
.icon { padding-top: 1em; padding-left: 1em; }
.icon + span { margin-top: 1.1em; padding-left: 0.5em; font-size: 0.8em;
-webkit-transition: margin .5s;
	-moz-transition: margin .5s;
 -o-transition: margin .5s;
-ms-transition: margin .5s;
 transition: margin .5s;
 }

	
/* Animating the height of the element*/
.nav a { height: 3.5em;}
.no-touch .nav a:hover, 
.nav a:active,
 .nav a:focus {
 height: 4em;
}	

	
/* Making the text follow the height animation */
.no-touch .nav a:hover .icon + span { margin-top: 2.2em; -webkit-transition: margin .5s;
 -moz-transition: margin .5s; -o-transition: margin .5s;
 -ms-transition: margin .5s;
 transition: margin .5s;
 }

	
/* Positioning the icons and preparing for the animation*/
.nav i { position: relative; display: inline-block; margin: 0 auto;
 padding: 0.4em; border-radius: 50%; font-size: 0.8em;
 box-shadow: 0 0 0 30px transparent;
 background: rgba(255,255,255,0.1); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0); -webkit-transition: box-shadow .6s ease-in-out;-moz-transition: box-shadow .6s ease-in-out; -o-transition: box-shadow .6s ease-in-out;
 -ms-transition: box-shadow .6s ease-in-out; transition: box-shadow .6s ease-in-out;
	}	
	
	

/* Animate the box-shadow to create the effect */
.no-touch .nav a:hover i,
.no-touch .nav a:active i,
.no-touch .nav a:focus i {box-shadow: 0 0 0 0 rgba(255,255,255,0.2); -webkit-transition: box-shadow .4s ease-in-out;
		-moz-transition: box-shadow .4s ease-in-out; -o-transition:box-shadow .4s ease-in-out; -ms-transition: box-shadow .4s ease-in-out;
 transition: box-shadow .4s ease-in-out;
}
		
}



@media (min-width: 50em) and (max-width: 61.250em)
{

/* Size and font adjustments to make it fit into the screen*/
.nav ul {font-size: 1em;}
}

/* The "tablet" and "mobile" version */
@media (max-width: 49.938em) 
{		

/* Instead of adding a border, we transition the background color */
.no-touch .nav ul li:nth-child(6n+1) a:hover,
 .no-touch .nav ul li:nth-child(6n+1) a:active,
 .no-touch .nav ul li:nth-child(6n+1) a:focus {
background: #292929;}
.no-touch .nav li:nth-child(6n+2) a:hover,
 .no-touch .nav li:nth-child(6n+2) a:active,
 .no-touch .nav li:nth-child(6n+2) a:focus {background: #292929;}
.no-touch .nav li:nth-child(6n+3) a:hover,
 .no-touch .nav li:nth-child(6n+3) a:active,
 .no-touch .nav li:nth-child(6n+3) a:focus {background: #292929;
}
.no-touch .nav li:nth-child(6n+4) a:hover,
 .no-touch .nav li:nth-child(6n+4) a:active,
 .no-touch .nav li:nth-child(6n+4) a:focus {background: #292929;}
.no-touch .nav li:nth-child(6n+5) a:hover,
 .no-touch .nav li:nth-child(6n+5) a:active,
 .no-touch .nav li:nth-child(6n+5) a:focus {background: #292929;}
.no-touch .nav li:nth-child(6n+6) a:hover,
 .no-touch .nav li:nth-child(6n+6) a:active,
 .no-touch .nav li:nth-child(6n+6) a:focus { background: #292929;}
.nav ul li {
 -webkit-transition: background 0.5s;
 -moz-transition: background 0.5s;
 -o-transition: background 0.5s;
		-ms-transition: background 0.5s;
 transition: background 0.5s;
 }	


}



/* CSS specific to the 2x3 columns version */

@media (min-width:32.5em) and (max-width: 49.938em)
 {
	
	
/* Creating the 2 column layout using floating elements once again */
	
.nav li {
		display: block;
		float: left;
		width: 50%;
	}
	
	
/* Adding some padding to make the elements look nicer*/
	
.nav a {
		padding: 0.3em;		
	}

	
/* Displaying the icons on the left, and the text on the right side using inlin-block*/
	
.nav li span, 
	.nav li span.icon {
		display: inline-block;
	}

	
.nav li span.icon {
		width: 50%;
	}

	
.nav li .icon + span {
		font-size: 0.8em;
	}

	
.icon + span {
		position: relative;
		top: -0.2em;
	}

	

/* Adaptating to the icons to animate the size and border of the rounded background in a more discreet way */
	
.nav li i {
		display: inline-block;
		padding: 2% 3%;
		border: 4px solid transparent;
		border-radius: 50%;
		font-size: 1em;
		background: rgba(255,255,255,0.1);
		-webkit-transition: border .5s;
		-moz-transition: border .5s;
		-o-transition: border .5s;
		-ms-transition: border .5s;
		transition: border .5s;
	}

	
/* Transition effect on the border color */
	
.no-touch .nav li:hover i,
	.no-touch .nav li:active i,
	.no-touch .nav li:focus i {
		border: 4px solid rgba(255,255,255,0.1);
	}
	
}



/* Adapting the font size and width for smaller screns*/

@media (min-width: 32.5em) and (max-width: 38.688em) 
{
	
	
.nav li span.icon {
width: 50%;
}

	
.nav li .icon + span {
font-size: 0.9em;}

}


/* Styling the toggle menu link and hiding it */


.nav .navtoogle{
 display: none; width: 100%;
 padding: 0.5em 0.5em 0.8em;
 font-family: 'Lato',Calibri,Arial,sans-serif;
	font-weight: normal; text-align: left; color: #ffffff;
	font-size: 1.2em;
 background: #292929; border: none;
 border-bottom: 2px solid #EC572C;
 cursor: pointer;
}


.icon-menu {
position: relative;
	top: 3px;
 line-height: 0;
 font-size: 1.6em;
}


@media (max-width: 32.438em) 
{

#nav-menu{
background: #fff;
}
	
/* Unhiding the styled menu link */
	
.nav .navtoogle{ margin: 0;
 display: block; }
	
	
/* Animating the height of the navigation when the button is clicked */
	
	
/* When JavaScript is disabled, we hide the menu */
	
.no-js .nav ul {
 max-height: 30em;
 overflow: hidden;
 }
	
	
/* When JavaScript is enabled, we hide the menu */
.js .nav ul { max-height: 0em; overflow: hidden;}
		
/* Displaying the menu when the user has clicked on the button*/
.js .nav .active + ul { max-height: 30em;
 overflow: hidden;
 -webkit-transition: max-height .4s;
 -moz-transition: max-height .4s;
 -o-transition: max-height .4s;
-ms-transition: max-height .4s;
 transition: max-height .4s;
 }

	
/* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/
.nav li span { display: inline-block; height: 100%; }
.nav a { padding: 0.5em; }
.icon + span { margin-left: 1em; font-size: 0.8em; }
	
/* Adding a left border of 8 px with a different color for each menu item*/
.nav li:nth-child(6n+1) { border-left: 8px solid rgba(236,87,44,.9);}
.nav li:nth-child(6n+2) { border-left: 8px solid rgba(236,87,44,.8);}
.nav li:nth-child(6n+3) { border-left: 8px solid rgba(236,87,44,.7);}
.nav li:nth-child(6n+4) { border-left: 8px solid rgba(236,87,44,.6);}
.nav li:nth-child(6n+5) { border-left: 8px solid rgba(236,87,44,.5);}
.nav li:nth-child(6n+6) { border-left: 8px solid rgba(236,87,44,.4);}

/* make the nav bigger on touch screens */
	
.touch .nav a { padding: 0.8em;}
}

/* #Home
================================================== */
#home{
 margin: 0 auto;
	text-align:center;
 position: relative; 
	width: 100%;
	overflow:hidden;
}
		
.home-text{
	position: absolute; 
	width:960px;
	top:50%;
	margin-top:-150px;
	left:50%;
	margin-left:-480px;
	overflow:hidden;
	z-index:1000;
}
.home-text h1{ 
	text-align:center;
    font-family: 'Montserrat', sans-serif;
	line-height:80px;
	font-size:80px;
	font-weight:900;
	color:#292929;
}			
.home-text span:first-child{
	color:#EC572C;
}			
.home-text span:last-child{
	border-bottom:4px dotted #EC572C;
}			
a.butt-awe {
	position: absolute;
    font-family: 'OpenSans-Regular-webfont';
	line-height:60px;
	font-size:22px;
	border:1px dotted rgba(255,255,255,.6);
	top:50%;
	left:50%;
	margin-left:-140px;
	width:280px;
	height:60px;
	margin-top:70px;
	color:#fff;
	background:rgba(0,0,0,.3);
	-webkit-transition: all .35s ease-in-out;
	-moz-transition: all .35s ease-in-out;
	-ms-transition: all .35s ease-in-out;
	-o-transition: all .35s ease-in-out;
	transition: all .35s ease-in-out;
	z-index: 2000;
}

a.butt-awe:hover {
	background:rgba(0,0,0,.7);
}				

@media only screen and (max-width: 900px) {				
#rotator-home{
	background:rgba(41,41,41,.8);
}
#rotator-home p{
	display:none;
}	
}		
.logo {
	position: absolute;
	bottom: 0;
	right: 210px;
	background: url('../images/logo.png')no-repeat center left;
	width: 150px;
	height: 70px;
	z-index: 2000;
}
			
a.twit-icon {
	position: absolute;
	font-family: 'FontAwesome';
	line-height:70px;
	font-size:18px;
	text-align:center;
	color:#fff;
	bottom:0;
	right:140px;
	-webkit-transition: all .35s ease-in-out;
	-moz-transition: all .35s ease-in-out;
	-ms-transition: all .35s ease-in-out;
	-o-transition: all .35s ease-in-out;
	transition: all .35s ease-in-out;
	width: 70px;
	height:70px;
	z-index: 2000;
}

a.twit-icon:hover {
	background: #EC572C;
}			
			
a.facebook-icon {
	position: absolute;
	font-family: 'FontAwesome';
	line-height:70px;
	font-size:18px;
	text-align:center;
	color:#fff;
	bottom:0;
	right:70px;
	-webkit-transition: all .35s ease-in-out;
	-moz-transition: all .35s ease-in-out;
	-ms-transition: all .35s ease-in-out;
	-o-transition: all .35s ease-in-out;
	transition: all .35s ease-in-out;
	width: 70px;
	height:70px;
	z-index: 2000;
}

a.facebook-icon:hover {
	background: #EC572C;
}				
			
a.mail-icon {
	position: absolute;
	font-family: 'FontAwesome';
	line-height:70px;
	font-size:18px;
	text-align:center;
	color:#fff;
	bottom:0;
	right:0;
	-webkit-transition: all .35s ease-in-out;
	-moz-transition: all .35s ease-in-out;
	-ms-transition: all .35s ease-in-out;
	-o-transition: all .35s ease-in-out;
	transition: all .35s ease-in-out;
	width: 70px;
	height:70px;
	z-index: 2000;
}

a.mail-icon:hover {
	background: #EC572C;
}				
	
/* #solution
================================================== */

#solution{
	position: relative; 
	width: 100%;
	overflow:hidden;
	padding-top:120px;
	padding-bottom:80px;
	margin:0 auto;
}

/* #Products
================================================== */

#products{
	position: relative; 
	width: 100%;
	overflow:hidden;
	padding-top:120px;
	padding-bottom:80px;
	margin:0 auto;
}

/* #about
================================================== */

#about{
	position: relative; 
	width: 100%;
	overflow:hidden;
	padding-top:120px;
	padding-bottom:80px;
	margin:0 auto;
}


/* #partners
================================================== */

#partners{
	position: relative; 
	width: 100%;
	overflow:hidden;
	padding-top:120px;
	padding-bottom:80px;
	margin:0 auto;
}


/* #Contact
================================================== */
#contact{
	position: relative; 
	width: 100%;
	overflow:hidden;
	padding-top:120px;
	padding-bottom:80px;
	margin:0 auto;
	text-align:center;
}
	
#copy{
	position:relative;
	margin:0;
	padding:0;
	background:#292929;
	width:100%;
	height:40px;
}	
#copy p{
	line-height:40px;
	color:#fff;
	text-align:center;
}

/* #Media Queries
================================================== */

@media only screen and (min-width: 768px) and (max-width: 959px) {
.home-text{ 
	height:230px;
	width:760px;
	top:50%;
	margin-top:-115px;
	left:50%;
	margin-left:-380px;
}			
a.butt-awe {
	margin-top:40px;
}
.home-text h1{ 
	line-height:60px;
	font-size:60px;
}
#team1{
	width: 172px;
	height:330px;
}
#team2{
	width: 172px;
	height:330px;
}
#team3{
	width: 172px;
	height:330px;
}
#team4{
	width: 172px;
	height:330px;
}
.container11 {
	width: 172px;
	height: 172px;
}

.card {
	width: 172px;
	height: 172px;
}
.profile  .back {
	width: 172px;
	height: 172px;
}
.profile  img {
	width: 172px;
	height: 172px;
}
.info-profile{
	top:172px;
}
.info-profile h6{
	margin-left:10px;
	margin-right:10px;
}
.numb{
	width: 170px;
	height:105px;
}
.numb .big-numb{
	top:5px;
	line-height:60px;
	font-size:60px;
}
.numb .text-numb{
	top:68px;
	line-height:28px;
	font-size:14px;
}
.icon-numb{
	width:24px;
	line-height:28px;
	font-size:18px;
}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
.home-text{ 
	height:160px;
	width:470px;
	top:50%;
	margin-top:-80px;
	left:50%;
	margin-left:-235px;
}
.home-text h1{ 
	line-height:40px;
	font-size:40px;
}			
a.butt-awe {
	margin-top:40px;
}	
}

@media only screen and (min-width: 320px) and (max-width: 479px) {	
}
@media only screen and (max-width: 479px) {
			#arrow_left {
				margin-top:80px;
			}
			#arrow_right {
				margin-top:80px;
			}
.home-text{ 
	height:140px;
	width:280px;
	top:50%;
	margin-top:-70px;
	left:50%;
	margin-left:-140px;
}
.home-text h1{ 
	line-height:26px;
	font-size:26px;
}			
a.butt-awe {
	margin-top:10px;
	line-height:50px;
	font-size:20px;
	margin-left:-120px;
	width:240px;
	height:50px;
}		
.logo {
	right:120px;
}			
a.twit-icon {
	width: 40px;
	right:80px;
}			
a.facebook-icon {
	width: 40px;
	right:40px;
}		
a.mail-icon {
	width: 40px;
}
}

@media only screen and (max-width: 319px) {	
}




/* #Font-Face
================================================== */

@font-face {
  font-family: 'FontAwesome';
  src: url('font/fontawesome-webfont3294.eot?v=3.0.1');
  src: url('font/fontawesome-webfontd41d.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('font/fontawesome-webfont3294.woff?v=3.0.1') format('woff'),
    url('font/fontawesome-webfont3294.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
    font-family: 'OpenSans-Light-webfont';
    src: url('font/OpenSans-Light-webfont.eot');
    src: url('font/OpenSans-Light-webfontd41d.eot?#iefix') format('embedded-opentype'),
         url('font/OpenSans-Light-webfont.woff') format('woff'),
         url('font/OpenSans-Light-webfont.ttf') format('truetype'),
         url('font/OpenSans-Light-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

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

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

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

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

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