@font-face
{
    font-family: 'officinasansitcpro-bold';
    src: url("../fonts/officinasansitcpro-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/officinasansitcpro-bold.woff") format("woff"), url("../fonts/officinasansitcpro-bold.ttf") format("truetype"), url("../fonts/officinasansitcpro-bold.svg#svgFontName") format("svg");
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary
{
    display: block;
}

body
{
    font-size: 100%;
    font-family: Sans-serif;
    padding: 1.25em 0 0;
}

h1, h2
{
    color: #00259b;
    font-family: 'officinasansitcpro-bold';
    font-size: 2em;
    font-weight: normal;
}

a
{
    color: #00259b;
}

a:hover
{
    text-decoration: none;
}
/* ==|== Header ================================================== 
   Styling applicable to header (elements)
   ============================================================= */
header
{
    border-bottom: 0.313em solid #5bc5f2; /*5px*/
}

header .inner
{
    margin: 0 auto;
    padding: 0 1em;
    position: relative;
    max-width: 55em; /* 880px*/
}

.logo
{
    float: right;
    height: 92px;
    margin-bottom: 0.625em;
    width: 212px;
}
/* ==|== Global Navigation =========================================== 
   Main menu styling
   ============================================================= */
nav ul
{
    bottom: 0;
    float: left;
    margin: 0;
    padding: 0;
    margin-left: -1.563em; /*25px*/
    margin-top: 4.375em; /*70px*/
}

nav ul li
{
    float: left;
}

nav ul li a
{
    color: #00259b;
    float: left;
    font-size: 1em;
    font-weight: 700;
    height: 2.25em;
    line-height: 2.25em;
    padding: 0 0.625em 0 1.562em;
    text-decoration: none;
}

nav ul li a:hover
{
    color: #009ee3;
}

nav ul li .active
{
    background: #5bc5f2 url(../img/active.png) no-repeat left top;
    color: #fff;
}

nav ul li .active:hover
{
    color: white;
    cursor: default;
}

/* ==|== Banner =================================================== 
   Styling for banner in blue bar homepage
   ============================================================= */
.banner
{
    background: #5bc5f2;
    -moz-box-shadow: 0 10px 16px -7px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0 10px 16px -7px rgba(0, 0, 0, 0.6);
    box-shadow: 0 10px 16px -7px rgba(0, 0, 0, 0.6);
    padding: 1.5625em 0 1.875em; /*25px 0 30px*/
    width: 100%;
}

.banner .inner
{
    margin: 0 auto;
    font-size: 0.8125em; /*30px*/
    padding: 0 1em; /*16px*/
    max-width: 67.692em; /* 880px*/
}

.banner-btn
{
    border: 4px solid #5bc5f2;
    display: block;
    font-size: 1.3em;
    font-weight: 700;
    margin-top: 20px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
}

.movie
{
    height: 0;
    margin: 0 5.5% 0 0;
    overflow: hidden;
    position: relative;
    padding-bottom: 38.25%; /* 16/9 ratio */
    width: 62.5%;
}

.content img
{
    box-sizing: border-box;
    max-width: 100%;
}

.content-movie-wrapper
{
    background: #000;
    border: 4px solid #fff;
    -moz-box-shadow: 0 10px 16px -7px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0 10px 16px -7px rgba(0, 0, 0, 0.6);
    box-shadow: 0 10px 16px -7px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    min-height: 170px;
    line-height: 0;
}

.img
{
    width: 62.5%;
}

.img img
{
    border: 4px solid #fff;
    -moz-box-shadow: 0 10px 16px -7px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0 10px 16px -7px rgba(0, 0, 0, 0.6);
    box-shadow: 0 10px 16px -7px rgba(0, 0, 0, 0.6);
    float: left;
    width: 100%;
}

.movie iframe, .movie object, .movie embed
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.text
{
    color: white;
    width: 32%;
}

.text h1
{
    color: #00259b;
}

.info-wrapper
{
    margin: 0 auto;
    font-size: 0.813em; /*13px*/
    margin-top: 2.308em; /*30px*/
    max-width: 67.692em; /*880px*/
    padding: 0 1em; /*16px*/
}

.intro
{
    margin-right: 5.5%;
    width: 62.5%;
}

.updates
{
    width: 32%;
}

.updates ul
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.updates a
{
    color: black;
}

.updates a:hover
{
    color: #00259b;
    text-decoration: none;
}

.updates li
{
    background: url(../img/bullet.png) no-repeat left 7px;
    border-bottom: 1px solid #5bc5f2;
    margin-bottom: 0.625em; /*10px*/
    padding: 0 0 0.438em 0.75em;
}

/* ==|== Content =============================================== 
   Styling applied to content wrapper and content itself
   ============================================================= */
.content
{
    margin: 0 auto;
    font-size: 0.813em; /*13px*/
    overflow: hidden;
    padding: 1.231em; /*16px*/
    max-width: 67.692em; /*880px*/
}

.content p.partner-info
{
    margin-bottom: 2em;
}

.content h2
{
    color: #5bc5f2;
    font-size: 1.385em; /*18px*/
}

body fieldset
{
    margin: 0;
    padding: 0;
    border: 0;
}

label
{
    clear: left;
    float: left;
    margin: 0 0 0.769em; /*10px*/
    width: 9.231em; /*160px*/
}

body input, body textarea
{
    border: 1px solid #e0e0e0;
    float: left;
    margin: 0 0 0.769em; /*10px*/
    padding: 0.385em; /*5px*/
    width: 23.077em;
}

input[type=button]
{
    background: #00259b;
    color: white;
    width: auto;
}

input[type=button]:hover
{
    background: #5bc5f2;
}

footer
{
    border-top: 2px solid #785a23;
    margin-top: 1.75em; /*60px*/
}

.company-logos
{
    background: white;
    margin: 0 auto; /*30px*/
    padding: 1.875em 0; /*30px*/
    position: relative;
    max-width: 55em; /*880px*/
}

.company-logos img
{
    max-width: 100%;
}

.company-logos .last
{
    margin-right: 0;
}

.company-logos div, .company-logos p
{
    float: left;
    padding: 0;
}

.company-logos p
{
    font-size: 0.813em;
    font-style: italic;
    margin: 24px 10px 0;
}

.company-logos a
{
    float: left;
    margin-right: 10px;
    text-decoration: none;
}

.company-logos div.supported-by
{
    float: right;
}

.supported-by a
{
    margin-right: 0;
}

.collaboration
{
    margin-right: 20px;
    overflow: hidden;
    width: 500px;
}

.collaboration .first
{
    margin-right: 5px;
}

.company-note
{
    float: none;
}

.footer-info
{
    color: #999999;
    font-size: 0.75em; /*12px*/
    margin: 2.5em auto; /*30px*/
    max-width: 67.692em; /*880px*/
    padding: 0 1.33em; /*16px*/
}

.site-credits
{
    margin: 0;
    padding: 0;
}

.site-credits a
{
    color: #999999;
}
/* ==|== Process Scheme ======================================== 
   Styling for Process Scheme used in 'History'
   ============================================================= */
.process-schemes
{
    margin: 3em 0;
}

.process-scheme
{
    background: url(../img/line.png) repeat-x 20px;
}

.process-scheme .sub, .process-scheme .subs
{
    display: none;
}

.process-scheme div
{
    background: #5BC5F2;
    color: #fff;
    float: left;
    font-weight: 700;
    line-height: 4em;
    height: 4em;
    margin-right: 6%;
    position: relative;
    text-align: center;
    width: 15.2%;
    word-wrap: break-word;
}

.process-scheme div.last
{
    margin-right: 0;
}

.process-scheme.level2
{
    background-position: center 50px;
}

.process-scheme .empty
{
    background: #fff;
}

.process-scheme div.no-margin
{
    margin-right: 0;
}

.process-scheme div.first.empty
{
    margin-right: 0;
    width: 42.4%;
}

.process-scheme div.last.empty
{
    width: 21.2%;
}

div.process-scheme-inner
{
    background: url(../img/line.png) repeat-y center;
    float: none;
    height: auto;
    margin: 0;
    padding-top: 20px;
    width: auto;
}

/* ==|== Misc ================================================== 
   General styling used throughout the website
   ============================================================= */
.clearfix:before, header .inner:before, nav ul:before, .banner .inner:before, .info-wrapper:before, .footer-info:before, .clearfix:after, header .inner:after, nav ul:after, .banner .inner:after, .info-wrapper:after, .footer-info:after
{
    content: "";
    display: table;
}

.clearfix:after, header .inner:after, nav ul:after, .banner .inner:after, .info-wrapper:after, .footer-info:after
{
    clear: both;
}

.clearfix, header .inner, nav ul, .banner .inner, .info-wrapper, .footer-info
{
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

img.border
{
    border: 1px solid #00259b;
    margin: 0 1em 1em 0;
}

.clear-left, .content h2
{
    clear: left;
}

.clear-right
{
    clear: right;
}

.left, .movie, .intro, .disclaimer
{
    float: left;
}

.right, .text, .updates, .site-credits
{
    float: right;
}

.hide
{
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    text-indent: -99999px;
}

/* Styling download list */
.link-list
{
    list-style-type: none;
    margin: 0 0 40px;
    padding: 0;
}
.link-list li
{
    background: url(../img/bullet.png) no-repeat left 7px;
    border-bottom: 1px solid #5bc5f2;
    margin-bottom: 0.625em; /*10px*/
    padding: 0 0 0.438em 0.75em;
}
@media only screen and (min-width: 795px)
{
    .link-list-wrapper
    {
        float: left;
        margin-right: 40px;
        width: 45%;
    }
}
/* ==|== Responsive ============================================
   Styling adapted for mobile devices
   ============================================================= */
@media only screen and (min-width: 616px)
{
    .content-movie-wrapper
    {
        clear: none;
        float: left;
        margin: 0 5.5% 0 0;
        overflow: hidden;
        width: 62.5%;
    }

    .content img
    {
        max-width: 100%;
    }
}

@media only screen and (max-width: 795px)
{
    header
    {
        text-align: center;
    }

    .logo
    {
        float: none;
        margin: 0 auto;
    }

    nav ul
    {
        float: none;
        margin-top: 1.875em;
    }

    nav ul li
    {
        float: none;
    }

    .banner
    {
        width: auto;
    }
}

@media only screen and (max-width: 750px)
{
    .text, .img
    {
        width: 100%;
    }

    .text
    {
        padding-top: 1em;
    }

    .movie
    {
        padding-bottom: 55%; /* 16/9 ratio */
        width: 100%;
    }

    header
    {
        text-align: center;
    }

    nav ul
    {
        margin-top: 1.875em;
    }

    .logo
    {
        float: none;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 615px)
{
    .intro
    {
        margin: 0;
        width: 100%;
    }

    .updates
    {
        width: 100%;
    }

    .collaboration
    {
        margin: 0;
        width: auto;
    }
}

@media only screen and (max-width: 570px)
{
    body
    {
        font-size: 110%;
    }

    header div.inner
    {
        padding: 0;
    }

    nav
    {
        width: 100%;
    }

    nav ul
    {
        margin: 0;
        padding: 0;
        margin: 1.563em 0 0; /*30px*/
        width: 100%;
    }

    nav ul li
    {
        clear: left;
        margin-right: 0;
        width: 100%;
    }

    nav ul li a
    {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #5bc5f2;
        height: 2.5em;
        height: 2.5em;
        padding: 0;
        text-align: left;
        text-indent: 1em;
        width: 100%;
    }

    nav ul li a.active
    {
        background-image: none;
    }

    .process-schemes
    {
        margin: 1em 0;
    }

    .process-scheme
    {
        background: url(../img/line.png) repeat-y center;
    }

    .process-scheme div
    {
        clear: left;
        float: none;
        margin-right: 0;
        margin-bottom: 1em;
        width: auto;
    }

    .process-scheme div.last
    {
        margin: 0;
    }

    .process-scheme .contains-sub
    {
        height: auto;
    }

    .process-scheme .subs
    {
        display: block;
    }

    .process-scheme .sub
    {
        background: #96daf7;
        display: block;
        width: 90%;
        margin: 0 5% 1em;
    }

    .process-scheme .subs
    {
        background: url(../img/line-sub.png) repeat-y center;
        padding-top: 1.875em; /*30px*/
        margin-top: -0.625em; /*-10px*/
        height: auto;
        line-height: inherit;
    }

    .process-scheme.level2
    {
        display: none;
    }

    .company-logos p
    {
        float: none;
        margin-bottom: 0.625em; /*10px;*/
    }

    .company-logos a
    {
        margin: 0 0.625em; /*10px*/
    }

    p.company-note
    {
        clear: left;
        padding: 1.25em 0; /*20px*/
    }
}

@media print
{
    body *
    {
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    body nav
    {
        display: none;
    }

    .logo
    {
        float: none;
    }

    header
    {
        border: 0;
    }

    header .inner
    {
        margin: 0;
    }

    .banner
    {
        background: none;
    }

    .banner .inner
    {
        margin: 0;
        max-width: none;
    }

    .img
    {
        width: auto;
    }

    .img img
    {
        margin-right: 1.25em; /*20px*/
        width: auto;
    }

    .text
    {
        color: #000;
        float: none;
        width: auto;
    }

    .intro
    {
        float: none;
        margin: 0;
        width: auto;
    }

    .updates
    {
        float: none;
        padding-top: 1em;
        width: auto;
    }

    .updates li
    {
        border-bottom: 0;
    }

    .info-wrapper
    {
        margin: 0;
        max-width: none;
    }

    .company-logos
    {
        margin: 0;
        max-width: none;
    }

    .company-note
    {
        clear: left;
    }

    .content
    {
        max-width: none;
    }

    .side-credits
    {
        float: none;
    }
}