@font-face {
    font-family: 'ECSquareSansProRegular';
    src: url('../fonts/ecsquaresanspro-regular-web.eot');
    src: url('../fonts/ecsquaresanspro-regular-web.woff'),
         url('../fonts/ecsquaresanspro-regular-web.woff2');
    font-weight: normal;
    font-style: normal;

}
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
  url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
  url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
 url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
 url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

*, *::before, *::after {    box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { }
body {	margin: 0px;	font-family: 'ECSquareSansProRegular', Verdana;	letter-spacing: .5px;  }
#header {    background-color: #034ea2;    width: 100%; height: 130px; position: fixed; top:0; z-index: 1000; }
#header .content, #main .content, #abstract .content, #footer .content { width: 1280px; margin: 0 auto; position:relative; }
#header .content::after { content:" "; display:block; clear: both; }
#header .logo { float:left; }

#main { margin-top: 130px; color: #fff; position: relative; background-color: #f3f3f3; padding: 30px 0 60px;   }
#main h2 {  color: #000; font-size: 26px; font-weight: bold; }


#abstract { background-color: #767676; padding: 60px 0 30px 0; color: #fff; position: relative; }
.container { display: flex; flex-direction: row; flex-wrap: wrap; }
.cardapp, .cardons, .carddoc, .item.uno, .item.due { border:solid 1px #ccc; padding: 15px; width: 50%; display: inline-block; }
.cardapp, .cardons, .carddoc { widt:360px; max-width: 31%;    margin: 1%;    height: 360px;    padding: 20px;	background-color: #fff;    background-image: url(../images/app_background.png);    background-repeat: no-repeat;    background-position: 20px 20px; position: relative; }
.cardons { background-image: url(../images/add-ons_background.png); }
.carddoc { background-image: url(../images/docs_background.png); }
.menu01, .menu02, .menu03 { position: absolute; right: -10px; top: 20px; }
.menu02 { top: 80px; }
.menu03 { top: 140px; }

.name {	background-color:#034ea2;	color: #fff; text-align: right;    overflow: hidden;    white-space: nowrap; }
.name::after {    content: '';    position: absolute;    right: 0;    top: 100%;    width: 0;    height: 0;    border-left: 0px solid transparent;    border-right: 10px solid transparent;    border-top: 10px solid #023554; }
.name a {color: #fff; text-decoration: none; }
.last-wrapper {  display: inline-block;  overflow: hidden;  max-width: 0;  transition: all 0.3s;}

a#lisflood, a#add-ons, a#documents {    display: block;    height: 160px; }

.name:hover .last-wrapper { color: #fff; text-decoration: none; max-width: 100px;    transition: all 0.7s;    margin-right: 15px; }

.name i { color: #fff;    font-size: 24px;    margin: 10px;}

.spec {    position: absolute;    bottom: 0;    color: #000;    width: calc(100% - 40px); }
.spec h5 { font-size: 24px; font-weight: bold;    margin: 0; }
.spec p { font-size: 14px;    margin: 20px 0; }

#abstract h5 {    margin: 0;    font-size: 20px; }
#abstract a { color: #fff; }

#footer { background-color: #000; color: #fff; padding: 30px 0; position: relative; }
#footer a { text-decoration: none; color: #fff; transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out; }
#footer a:hover { color: #A7A7A7; }
#footer p.copyright {    margin: 0; }

ul.menu {     margin: 0 15px;    position: absolute;    bottom: 9px;    width: calc(100% - 260px);    left: 260px; }
ul.menu li { list-style-type: none; display: inline-block; border-right:solid 1px #fff; padding-right:10px; margin-right:10px; }
ul.menu li:last-child { float:right; border-right: none; padding-right:0; margin-right:0; }
ul.menu li:nth-last-child(2) { border-right: none; }
ul.menu li a { color: #fff; text-decoration: none; transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out; }
ul.menu li a:hover { color:#c0d3e8; }

.fa-fw {    width: 1.28571429em;    text-align: center;}

.fa {  display: inline-block;  font: normal normal normal 14px/1 FontAwesome;  font-size: inherit;  text-rendering: auto;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}
.fa-external-link:before {  content: "\f08e";}
.fa-file-text-o:before { content: "\f0f6"; }
.fa-github:before { content: "\f09b"; }
.fa-twitter:before { content: "\f099"; }
.fa-facebook:before { content: "\f09a"; }
.fa-google-plus:before { content: "\f0d5"; }
.fa-file-pdf:before { content: "\f1c1"; }