/* ---------------------------------------------------------------------------------------------- */
/*  ECL - Screen CSS  					                										  */
/*                 					                							 			      */
/*  Note    :                                           										  */
/*  - Reset CSS based on Eric Meyer's Reset CSS ver2.0 http://meyerweb.com/eric/tools/css/reset/  */
/*  - IE7 : IE7 specific styles exist in screen-ie7.css 										  */
/*  - IE8 : IE8 specific styles exist in screen-ie8.css 										  */
/*  - IE9 : IE9 specific styles exist in screen-ie8.css 										  */
/* ---------------------------------------------------------------------------------------------- */

/*------------------*/
/* Table of Content */
/*------------------*/

/*
1. Reset CSS

2. General

3. Lay-out

4. Module

5. Utilites
*/


/*--------------*/
/* 1. Reset CSS */
/*--------------*/

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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}table,tbody,tfoot,thead,tr,th,td{font-size:100%;font:inherit;vertical-align:baseline;border-collapse:collapse;border-spacing:0;margin:0;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:100%;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}


/*------------*/
/* 2. General */
/*------------*/

body {
    margin: 0;
    padding: 0;
    font: 62.5% Arial, Helvetica, Verdana ,sans-serif;
    color: #000;
    background: #FFF url(../img/bg.png);
}

h1, h2, h3, h4 {
    margin: 0 0 15px 0;
    font-weight: bold;
    line-height: 100%;    
}

h1 {
    font-size: 2.4em;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.6em;
}

h4 {
    font-size: 1.2em;
}

p {
    font-size: 1.2em;
    margin: 0 0 15px 0;
    line-height: 1.5;
}


a {
    color: #000;
    font-size: 1.2em;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    text-decoration: underline;
}

    a:hover {
        color: #c70000;
        text-decoration: none;
    }
.btn {
    line-height: 39px;
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    color: #FFF;
    text-decoration: none;
    text-align: center;
    padding: 5px 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-left: 15px;
}
    .btn:hover,
    .btn:focus {
        color: #fff;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
        filter: alpha(opacity=85);
        opacity: .85;
    }
    .btn:focus {
        outline: 1px dotted #000;
    }
strong {
    font-weight: bold;
}

address {
    font-size: 1.2em;
    font-style: normal;
    line-height: 1.5;
    margin: 0 0 15px;
}

table {
    margin: 0 0 15px 0;
}

td, th  {
    font-size: 1.1em;
    padding: 5px;
}

input, textarea {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    outline: none;
}

    input.submit {
        cursor: pointer;
    }

label {
    font-size: 1.2em;
    display: block;
    margin: 0 0 3px 0;
}

textarea {
    margin: 0 0 15px 0;
}

img {
    font-size: 1.2em;
    text-align: center;
}

.clear  {
    clear: both;
}

.img-replacement {
    display: block;
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
}

.img-container {
    text-align: center;    
}
    
    .img-container img {
        max-width: 100%;
    }
    

/*------------*/
/* 3. Lay-out */
/*------------*/

.grand-wrapper /* Important to remove space on the top of page in Opera Browser */ {
    margin: 0;
    padding: 0;
    width: 100%;
    position: absolute;
    top: 0;
}

.wrapper {
    width: 972px;
    margin: 0 auto;
    position: relative;
}
    
    
    @media screen and (max-width: 969px) {
        .wrapper {
            width: 640px;
        }                    
    }

    @media screen and (max-width: 639px) {        
        .wrapper {
            width: 340px;
        }
    }

.header {
    height: 110px;
    position: relative;
}
    
    @media screen and (max-width: 969px) {
        .header {
            margin: 15px 0;
            height: auto;
        }
    }

.logo {
    display: block;
    height: 100px;
    position: absolute;
    top: 10px;
    left: 16px;
}
    
    .logo--main {
        position: relative;
        left: -3px;
        z-index: 2;
    }
    
    .logo--tag-line {        
        height: 20px;
        position: absolute;
        top: 28px;
        left: 195px;
    }
        
        @media screen and (max-width: 969px) {
            .logo--tag-line {
                display: none;
            }
        }
    
    .logo--bar {
        display: block;
        width: 940px;
        height: 23px;
        position: absolute;
        top: 77px;
        left: 2px;
        z-index: 1;
        background-color: #221e1f;
    }
        
        @media screen and (max-width: 969px) {
            .logo--bar {
                width: 100%;
                top: 77px;
                left: 0;
            }
        }
        
@media screen and (max-width: 969px) {
    .logo {
        position: static;        
    }
}

@media screen and (max-width: 639px) {
    .logo {
        margin-bottom: 15px;
    }
}

.header .contact-details {
    width: 330px;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top: 38px;
    right: 16px;
}
    
    @media screen and (max-width: 969px) {
        .header .contact-details {
            top: 13px;
            right: 0;
        }
    }
    
    @media screen and (max-width: 639px) {
        .header .contact-details {
            position: static;
        }
    }

.contact-details ul {
    list-style: none outside none !important;
    margin-left: 0 !important;
}

.header .contact-details li {float: left;}

.contact-details li {
    margin-bottom: 5px;
    padding: 0 0 0 25px;
    height: 20px;
    line-height: 20px;
    background: transparent url(../img/common-sprite.png) no-repeat;
}

    .contact-details .phone {
        margin-right: 5px;
        background-position: -985px -43px;
    }
        
        .contact-details .phone-m-2-lines {
            height: 36px;
        }
        
        .header .contact-details .phone {
            width: 125px;
        }

.contact-details .mail {
    background-position: -983px -75px;
}

.contact-details .mobile {
    background-position: -983px -97px;
}

.contact-details .linkedin {
    background-position: -983px -125px;
    line-height: 20px;
}

.contact-details a {
    font-size: 12px;
}

.content {
}

    .content .top {
        width: 972px;
        height: 30px;
        background: transparent url(../img/common-sprite.png) no-repeat;
    }
        
        @media screen and (max-width: 969px) {
            .content .top {
                display: none;
            }                    
        }

    .content .mid {
        padding: 2px 36px 0 36px;
        width: 900px;
        background: transparent url(../img/bg-content-area.png) repeat-y;
    }
        
        @media screen and (max-width: 969px) {
            .content .mid {
                padding: 15px 20px 0;
                background-image: none;
                width: 600px;
            }                    
        }

        @media screen and (max-width: 639px) {        
            .content .mid {
                width: 300px;
            }
        }
    
    @media screen and (max-width: 969px) {
        .content {
            background-color: #FFF;
            -webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
            -moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
            box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1);
        }                    
    }
    
.main-image {
    margin: 0 0 35px;
    height: 250px;
    overflow: hidden;
}
    
    .main-image img {
        display: block;
    }
    
    .home .main-image {
        height: auto;
    }
    
    @media screen and (max-width: 969px) {
        
        .main-image {
            height: auto;
        }        
        
        .main-image img {
            max-width: 100%;
        }
    }
    
    @media screen and (max-width: 639px) {
        
        .main-image {
            overflow: hidden;
        }
            
            .main-image img {
                max-width: none;
                height: 170px;
            }
            
            .home .main-image {
                height: 200px;
                position: relative;
            }
                
                .home .main-image img {
                    position: absolute;
                    top: -20px;
                    right: -30px;
                    height: 250px;
                }
        
    }
    

.footer {
    margin: 40px 0 0 0;
    padding: 25px 0 0 0;
    width: 900px;
    border-top: 10px solid #000;
}        
    
    @media screen and (max-width: 969px) {
        
        .footer {
            width: 600px;
        }
        
        .home .footer {
            margin-top: 0;
        }                    
    }
    
    @media screen and (max-width: 639px) {
        .footer {
            width: 300px;
        }
    }
    

.footer-links {    
    margin: 0 0 25px 0;
    padding: 0 15px;
    text-align: center;
}
    
    .footer-links a {
        height: 25px;
        line-height: 25px;
        color: #808080;
        font-size: 11px;
        text-decoration: none;
    }

        .footer-links a:hover {
            text-decoration: underline;
        }

.by {
    float: right;
    display: inline-block;
    width: 107px;
    color: #2d85ce;
    position: relative;
}

    .by .label {
        font-size: 1.1em;
        position: relative;
        top: 4px;
    }

    .by a {
        width: 68px;
        height: 41px;
        position: absolute;
        top: 0;
        right: 0;
        background: transparent url(../img/common-sprite.png) no-repeat -908px -55px;
    }

.l-water-mark-wrapper {
    width: 940px;
    position: relative;
    left: -20px;
}

    .l-water-mark-wrapper img {
        display: block;
        width: 100%;
    }
    
    @media screen and (max-width: 969px) {
        
        .l-water-mark-wrapper {
            width: 640px;
        }
        
    }
    
    @media screen and (max-width: 639px) {
        
        .l-water-mark-wrapper {
            padding-top: 10px;
            width: 340px;
        }
        
    }

.l-section {
    margin-bottom: 25px;
}
    
/*
.l-pg-section {
    padding-bottom: 35px;
}

.l-grid {
    float: left;
    margin-left: 15px;
}
    
    .l-grid:first-child {
        margin-left: 0;
    }
    
    .l-grid-m-large {
        margin-left: 20px;
    }
    
    .l-grid-m-larger {
        margin-left: 25px;
    }
    
    .l-grid-m-extra-larger {
        margin-left: 30px;
    }
    
    .l-grid-m-ultra-larger {
        margin-left: 35px;
    }
    
    .l-grid-m-largest {
        margin-left: 40px;
    }
*/

    
    
/* Address Area
/* ------------------------------------- */
    
.address-area {
    margin: 0 0 25px;
}

    .address-area .col-1 {
        float: left;
        width: 415px;
    }
    
        @media screen and (max-width: 969px) {
            
            .address-area .col-1 {
                width: 275px;
            }
            
        }
        
        @media screen and (max-width: 639px) {
            
            .address-area .col-1 {
                padding-bottom: 15px;
            }
            
        }

    .address-area .col-2 {
        float: right;
        width: 415px;
    }

        @media screen and (max-width: 969px) {
            
            .address-area .col-2 {
                width: 275px;
            }
            
        }
        
        @media screen and (max-width: 639px) {
            
            .address-area .col-2 {
                padding-bottom: 15px;
                width: 300px;
            }
            
        }


/* Office Contact
/* ------------------------------------- */

.office-contact {
    width: 300px;
}

    .office-contact--details {
    }        
        
        @media screen and (max-width: 639px) {
        
            .office-contact--details {
                float: left;
                margin-right: 30px;
            }
            
        }
    
    @media screen and (max-width: 639px) {
    
        .office-contact {
            width: 300px;
        }
        
    }
    

/* Map Area
/* ------------------------------------- */

.map-area {

}
    
    .map-area img {
        width: 100%;
    }
    

/*-----------*/
/* 4. Module */
/*-----------*/

/* Heading
/* ------------------------------------- */

.heading {
    padding: 0 0 0 35px;
    background: transparent url(../img/common-sprite.png) no-repeat -985px -2px;
    font-size: 15px;
    line-height: 20px;
    text-transform: uppercase;    
}


/* Button
/* ------------------------------------- */

.btn-find-out-more {
    width: 124px;
    height: 30px;
    background: #FFF url(../img/btn-find-out-more.png) no-repeat 0 0;
}


/* Accessibility Navigation
/* ------------------------------------- */

.nav-access {
    position: absolute;
    top: -9999px;
    left: -9999px;
}


/* Main Navigation
/* ------------------------------------- */

.main-nav {   
    margin: 0 0 1px 0;
    padding: 6px 0 1px;
    width: 900px;
    color: #FFF;
    background-color: #333;
}

    .main-nav li  {
        float: left;
        margin: 0 3px 5px;
    }

    .main-nav a {
        display: block;
        width: 144px;
        height: 39px;
        line-height: 39px;
        background: transparent url(../img/bg-nav-btn.png) no-repeat 0 0;
        color: #FFF;
        text-decoration: none;
        text-align: center;
    }
 
        .main-nav a:hover {
            background-position: 0 -39px;
        }
        
        .main-nav .selected a,
        .main-nav .selected a:hover {
            background-position: 0 -78px;
        }

@media screen and (max-width: 969px) {
    .main-nav {        
        width: 600px;
    }
}

@media screen and (min-width: 640px) {
    .main-nav {
        display: block !important;
    }
}

@media screen and (max-width: 639px) {        
    .main-nav {
        display: none;
        width: 300px;
    }
}

.main-nav-toggle {
    display: none;
    position: absolute;
    top: 26px;
    right: 0;
}
    
    .main-nav-toggle--bar {
        margin-top: 5px;
        display: block;
        width: 40px;
        height: 6px;
        background-color: #000;
    }
        
        .main-nav-toggle--bar:first-child {
            margin-top: 0;
        }
        
        .main-nav-toggle:hover .main-nav-toggle--bar {
            background-color: #c70000; 
        }
    
    @media screen and (max-width: 639px) {        
        
        .main-nav-toggle {
            display: block;
        }        
    }


/* CMS Editable Area
/* ------------------------------------- */

.cms-editable-area {
    padding: 0 20px;
}

    .cms-editable-area h1, 
    .cms-editable-area h2, 
    .cms-editable-area h3, 
    .cms-editable-area h4 {
        line-height: 1.2;
    }

    .cms-editable-area h3 {
        font-size: 1.2em;
        text-transform: uppercase;
    }

    .cms-editable-area a,
    .cms-editable-area ul li ul li,
    .cms-editable-area ol li ol li,
    .cms-editable-area ul li ol li,
    .cms-editable-area ol li ul li {
        font-size: 1em;
    }

    .cms-editable-area ul {
        list-style: disc outside none;
        margin: 0 0 15px 20px;
    }

    .cms-editable-area ul li ul,
    .cms-editable-area ol li ul {
        margin-top: 10px;
        list-style: disc outside none;
    }

    .cms-editable-area ol {
        list-style: decimal outside none;
        margin: 0 0 15px 24px;
    }

    .cms-editable-area ul li ol,
    .cms-editable-area ol li ol {
        margin-top: 10px;
        list-style: decimal outside none;
    }

    .cms-editable-area li {
        margin: 0 0 5px 0;
        font-size: 1.2em;
        line-height: 1.5;
    }

        .cms-editable-area li p {
            font-size: 1em;
            margin: 0;
        }

        .cms-editable-area li a,
        .cms-editable-area li p a {
            font-size: 1em;
        }
        
    .cms-editable-area table p,
    .cms-editable-area table li,
    .cms-editable-area table li p {
        font-size: 1em;
    }

    .cms-editable-area table,
    .cms-editable-area td,
    .cms-editable-area th {
        border-color: #000;
    }

    .cms-editable-area td, 
    .cms-editable-area th {
        font-size: 1.2em;
        padding: 5px;
    }

    @media screen and (max-width: 969px) {
        .cms-editable-area {
            padding: 0;
        }                    
    }
  

/* Logo List
/* ------------------------------------- */

.logo-list {
    margin-bottom: 30px;
    text-align: center;
}

    .logo-list img {
        margin: 15px 18px 15px;
        vertical-align: middle;
    }
    
    .logo-list-m-structured {
        text-align: left;
        margin: 30px 0 50px 140px;
    }
        
        @media screen and (max-width: 969px) {
        
            .logo-list-m-structured {
                margin-left: 90px;
            }
            
        }

        @media screen and (max-width: 639px) {
            
            .logo-list-m-structured {
                margin-left: 30px;
            }
            
        }
        
        .logo-list-m-structured img {
            margin: 15px 30px 15px 0;
        }
        
        .logo-list-m-structured--hdr {
            position: relative;
            left: -140px;
        }
            
            @media screen and (max-width: 969px) {
            
                .logo-list-m-structured--hdr {
                    left: -90px;
                }
                
            }

            @media screen and (max-width: 639px) {
                
                .logo-list-m-structured--hdr {
                    left: -30px;
                }
                
            }
            
            .logo-list-m-structured--hdr img {
                margin: 0 0 10px 0;
            }        
    

/* Featured Content (Home)
/* ------------------------------------- */

.featured-content {
    width: 900px;
    background: #FFF url(../img/bg-featured-content.gif) repeat-y;
}

    .featured-content--col {
        float: left;
        padding: 5px 15px 5px 15px;
        width: 270px;
    }
        
        .featured-content--col-m-center {
        }
        
            @media screen and (max-width: 969px) {
                .featured-content--col-m-center {
                    margin-left: 150px;
                }                    
            }
            
            @media screen and (max-width: 639px) {
                .featured-content--col-m-center {
                    margin-left: 0;
                }
            }
            
        @media screen and (max-width: 969px) {
            .featured-content--col {
                margin-bottom: 50px;
            }
        }

    .featured-content img {
        display: block;
        margin: 0 auto 15px;
    }
    
    @media screen and (max-width: 969px) {
        .featured-content {
            width: 600px;
            background-image: none;
        }
    }
    
    @media screen and (max-width: 639px) {
        .featured-content {
            width: 300px;
        }
    }


/* Project List
/* ------------------------------------- */
    
.project-list-area {
    padding: 20px 0 0 0;
}

    .project-list-area .col {
        float: left;
        width: 350px;
        margin-right: 80px;
    }
        
        @media screen and (max-width: 969px) {
            .project-list-area .col {
                margin-right: 0;
                width: 275px;
            }
                
                .project-list-area .col:first-child {
                    margin-right: 30px;
                }
        }

.project-list {
    margin-bottom: 30px !important;
    list-style: none outside none;
}

    .project-list li {
        margin: 0 0 25px;
    }
    
    .project-list h3 {
        margin: 0 0 5px;
    }


/* Download List
/* ------------------------------------- */    
    
.download-list {
    margin-left: 0;
    list-style: none outside none;
}    


/* Map Area
/* ------------------------------------- */       

.map-area a {
    color: #000 !important;
    font-size: 1.2em;
}

    .map-area a:hover {
        color: #c70000 !important;
    }
    
.map-area iframe,
.map-area img {
    border: 1px solid #666;
}


/* QR Code
/* ------------------------------------- */  

.qr-code {
    border: 1px solid #000;
}


/* Personal List
/* ------------------------------------- */  
    
.personal-list {
    margin: 0 0 25px;
}

    .personal-list ul {
        list-style: none outside none;
        margin-left: 0;
    }

    .personal-list li {
        float: left;
        padding: 10px 0 0 20px;
        margin: 0 9px 25px 0;
        width: 400px;
        border-left: 1px dotted #000;
    }
        
        @media screen and (max-width: 969px) {
            .personal-list li {
                width: 270px;
            }                    
        }
        
        @media screen and (max-width: 639px) {        
            .personal-list li {
                width: 300px;
            }
        }
        

    .personal-list .photo {
        float: left;
        margin: 0 20px 0 0;
        width: 88px;
        min-height: 108px;
        background-color: #ECECEC;
    }

        .personal-list .photo img {
            display: block;
            width: 86px;
            min-height: 108px;
            border: 1px solid #666;
        }

        .personal-list .info {
            float: left;
            width: 160px;
        }

            .personal-list .info ul {
                margin: 0;
            }

            .personal-list .info li {
                margin: 0;
                padding: 0 0 0 30px;                
                border: 0;
            }

            .personal-list  h3 {
                margin: 0 0 5px;
            }
            
            @media screen and (max-width: 969px) {
                .personal-list .info {
                    width: 160px;
                }                    
            }
            
            @media screen and (max-width: 639px) {        
                .personal-list .info {
                    margin-bottom: 25px;
                }
            }

    .personal-list .personal-info {
        margin: 0 0 10px;
        line-height: 1.5;
    }
    
    .personal-list .contact-qr-code {
        float: left;
        border: 1px solid #000;
    }
        
        @media screen and (max-width: 969px) {
            .personal-list .contact-qr-code {
                float: none;
            }                    
        }
        
        @media screen and (max-width: 639px) {        
            .personal-list .contact-qr-code {                
            }
        }


/*--------------*/
/* 5. Utilities */
/*--------------*/

.u-clearfix:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

.u-desktop {
    display: block;
}
    
    @media screen and (max-width: 969px) {
        .u-desktop {
            display: none;
        }
    }

    @media screen and (max-width: 639px) {        
        .u-desktop {
            display: none;
        }
    }

.u-tablet {
    display: none;
}
    
    @media screen and (max-width: 969px) {
        .u-tablet {
            display: block;
        }
    }

    @media screen and (max-width: 639px) {        
        .u-tablet {
            display: none;
        }
    }

.u-mobile {
    display: none;
}
    
    @media screen and (max-width: 969px) {
        .u-mobile {
            display: none;
        }
    }

    @media screen and (max-width: 639px) {        
        .u-mobile {
            display: block;
        }
    }