@charset "UTF-8";
@font-face {
    font-family: 'Clear Sans';
    src: url('../font/clearsans-regular-webfont.woff2') format('woff2'),
         url('../font/clearsans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Clear Sans';
    src: url('../font/clearsans-medium-webfont.woff2') format('woff2'),
         url('../font/clearsans-medium-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Clear Sans';
    src: url('../font/clearsans-bold-webfont.woff2') format('woff2'),
         url('../font/clearsans-bold-webfont.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Cardo';
    src: url('../font/cardoi99-webfont.woff2') format('woff2'),
         url('../font/cardoi99-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
*,
*::before,
*::after {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
html {
	background: #ccc;
	font-size: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}	
body {
	font-family:'Clear Sans', sans-serif;
	font-weight: 400;
	color: #4b4b4b;
	font-size: 1.3em;
	letter-spacing: 0.01em;
	line-height: 1.5;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	-webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
a:link, a:visited {
	color: #999;
	text-decoration: none;
}
a:hover,
a:active
a:focus {
	color: #000;
}
a:active, 
a:focus {
	outline: 1px solid #999;
  	outline-offset: 2px;
}
img {
	width: 100%;
	vertical-align: bottom;
}
p {
	margin: 1.5em 0;
}
strong {
	font-weight: 800;
}
em {
	font-style: italic;
}
h1 {
	font-size: 1.7em;
}
h2 {
	font-size: 1.3em;
}
h3 {
	font-size: 1em;
}
h4 {
	font-size:1.1em;
}
h1,
h2,
h3,
h4 {
	line-height: 1.5;
	letter-spacing: 0.02em;
	font-weight: 800;
	margin: 3em 0 1.5em;
}
/***********************************************************************/
/******************************* STRUCTURE ******************************/ 
/***********************************************************************/
.wrapper {
	max-width: 70em;
	margin: 0 auto;
	height: 100vh;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-transition: all 0.45s ease;
	-o-transition: all 0.45s ease;
	transition: all 0.45s ease;
}
.wrapper,
header,
main,
footer {
	background: #fff;
}
/****************** Header ******************/  
[href="#main"] {
    position: absolute;
    top: -2em;
    right: 0.7rem;
}
header {
	-webkit-box-flex: 0;
	-ms-flex: none;
	flex: none;
	padding: 1.5em 5%;
	border-bottom: 0.05em solid #ccc;
}
.logo {
	display: inline-block;
	width: 8em;
}
/******** Nav ********/ 
nav ul {        
	display: -webkit-box;        
	display: -ms-flexbox;        
	display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
nav ul li {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
}
nav ul li:first-child {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 30%;
	flex: 0 0 30%;
}
nav ul li:last-child {
   	-webkit-box-flex: 0;
	-ms-flex: 0 0 10%;
	flex: 0 0 10%;
	text-align: right;
}
nav ul li a {
	font-weight: 600;
	display: inline-block;
	font-size: 0.9em;
	padding: 0.2em 0.4em;
}
nav ul li a.current {
	color: #000;
}
/****************** Main ******************/
main {
	display: block;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	padding: 5em 5%;
}
main h1 {
	margin-top: 0;
}
/****************** Footer ******************/
footer {
	-webkit-box-flex: 0;
	-ms-flex: none;
	flex: none;
	font-weight: 600;
	border-top: 0.05em solid #ccc;
	padding: 1.5em 5%;
}
footer .footer-links {
	float: right;
}
footer .list-inline {
	font-size: 0.7em;
}
footer::after
{
	clear: both;
	display: table;
	content: "";
}
/****************** Hidden ******************/
.offscreen {
	clip: rect(1px 1px 1px 1px); /* IE 6/7 */
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; /* added line */
	width: 1px;
}
[hidden] {
	display: none;
}
/****************** Box ******************/
.box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.box div,
.box table {
	-webkit-box-flex: 0;
	-ms-flex: 0 50%;
	flex: 0 50%;
}
.box div {
	padding-right: 1.5em;
	margin-right: 1.5em;
}
/****************** Testimonials ******************/
aside {
	margin-top: 5em;
}
.testimonial {
	padding: 2.5em;
	background: linear-gradient(90deg, rgba(213,248,249,0.8) 0%, rgba(211,243,222,0.8) 50%);
}
.testimonial div,
.testimonial blockquote {
	display: inline-block;
	vertical-align: middle;
}
.testimonial div {
	width: 30%;
}
.testimonial blockquote {
	width: 70%;
}
.testimonial p {
	font-family: 'Cardo', serif;
	font-style: italic;
	line-height: 1.5;
	font-size: 1.3em;
	margin: 0 0 0 2em;
}
.testimonial cite {
	font-family: 'Clear Sans', sans-serif;
	font-weight: 400;
	font-size: 0.65em;
	font-style: normal;
	display: block;
	margin-top: 1.5em;
	text-align: right;
}

/****************** Columns ******************/
.columns {
     -webkit-columns: 2;
     columns: 2;
     -webkit-column-gap: 3em;
     column-gap: 3em;
}

/****************** Collapse content ******************/
.button-collapse {
	all: inherit;
	cursor: pointer !important;
	border: none;
  	background: none;
	margin: 0 0 0 -1em;
	padding: 0;
}
.button-collapse::before {
	float: left;
	width: 1em;
	text-align: left;
	line-height: 1.5;
	font-weight: 400;
	content : '+';
}
[aria-expanded="true"].button-collapse::before {
	content : '–';
}
.list-collapse {
	margin: 5em 0 0;
}
.list-collapse > li {
	border-top: 0.05em solid #ccc;
	padding: 1.5em;
}
.list-collapse > li:last-child {
	border-bottom: 0.05em solid #ccc;
}
.list-collapse h2,
.list-collapse h3 {
	margin: 0;
}
.list-collapse > li h3 {
	margin-bottom: 1.5em;
}
.list-collapse .columns {
	margin-top: 1.5em;
}

/****************** Lists ******************/
.list-bullet {
	margin: 1.55em auto;
	padding-left: 1em;
	width: 90%;
}
.list-bullet li {
	margin-bottom: 0.5em;
	position: relative;
	-webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
.list-bullet li:last-child {
	margin-bottom: 0;
}
.list-bullet li::before {
	content: '•';
	position: absolute;
	width: 1em;
	line-height: 1.5;
	top: 0;
	left: -1em;
}
.list-inline li {
	float: left;
	margin-right: 1em;
}
.list-inline li:last-child {
	margin-right: 0;
}
/****** Current page *********/
.software nav ul li:nth-of-type(2) a,
.technology nav ul li:nth-of-type(3) a,
.references nav ul li:nth-of-type(4) a,
.about-us nav ul li:nth-of-type(5) a,
.contact nav ul li:nth-of-type(6) a {
	color: #000;
}


/***********************************************************************/
/******************************* Queries *******************************/ 
/***********************************************************************/

	
	@media screen and (max-width: 70em) {
		html {
			font-size: 95%;
		}
		
	@media screen and (max-width: 55em) {
		
		html {
			font-size: 90%;
		}
		nav ul li {
			margin-top: 0.6em;
		}
		nav ul li:first-child {
			-webkit-box-flex: 1;
			-ms-flex: 1 100%;
			flex: 1 100%;
			margin-top: 0;
		}
		.columns {
			-webkit-columns: 1;
		  	columns: 1;
		}
		.testimonial div,
		.testimonial blockquote {
			display: block;
			vertical-align: inherit;
		}
		.testimonial div {
			width: 70%;
			margin: 0 auto;
		}
		.testimonial blockquote {
			width: 100%;
		}
		.testimonial p {
			margin: 2em 0 0;
		}
		.box div,
		.box table {
			-ms-flex: 1 100%;
			flex: 1 100%;
			margin-top: 0;
		}
		.box div {
			padding: 0;
			margin: 0 0 1.5em 0;
		}
	}
	
	@media screen and (max-width: 35em) {
		html {
			font-size: 85%;
		}
		nav ul li,
		nav ul li:last-child {
			-webkit-box-flex: 0;
			-ms-flex: 0 0 auto;
			flex: 0 0 33.3333%;
		}
		nav ul li:nth-of-type(1) { 
			-webkit-box-ordinal-group: 2; 
			-ms-flex-order: 1; 
			order: 1;
		}
		nav ul li:nth-of-type(2) { 
			-webkit-box-ordinal-group: 3; 
			-ms-flex-order: 2; 
			order: 2; 
		}
		nav ul li:nth-of-type(3) { 
			-webkit-box-ordinal-group: 6; 
			-ms-flex-order: 5; 
			order: 5; 
		}
		nav ul li:nth-of-type(4) {  
			-webkit-box-ordinal-group: 4;  
			-ms-flex-order: 3;  
			order: 3;
		}
		nav ul li:nth-of-type(5) { 
			-webkit-box-ordinal-group: 7; 
			-ms-flex-order: 6; 
			order: 6; 
		}
		nav ul li:nth-of-type(6) { 
			-webkit-box-ordinal-group: 5; 
			-ms-flex-order: 4; 
			order: 4; 
		}
		nav ul li:nth-of-type(7) { 
			-webkit-box-ordinal-group: 8; 
			-ms-flex-order: 7; 
			order: 7;
		}
		.testimonial div {
			width: 100%;
		}
	}
	@media screen and (max-width: 25em) {
		
		nav ul li {
			-webkit-box-flex: 0;
			-ms-flex: 0 1 50%;
			flex: 0 1 50%;
		}
		nav ul li:nth-of-type(3) { 
			-webkit-box-ordinal-group: 5; 
			-ms-flex-order: 4; 
			order: 4;  
		}
		nav ul li:nth-of-type(4) {  
			-webkit-box-ordinal-group: 7;  
			-ms-flex-order: 6;  
			order: 6; 
		}
		nav ul li:nth-of-type(5) {   
			-webkit-box-ordinal-group: 4;   
			-ms-flex-order: 3;   
			order: 3; 
		}
		nav ul li:nth-of-type(6) {  
			-webkit-box-ordinal-group: 6;  
			-ms-flex-order: 5;  
			order: 5; 
		}
		
	}