@charset "utf-8";
/* CSS Document */

/*=============================== Important ========================*/
body, html { width:100%; position:relative; margin:0%; padding:0%; background:#fff; }
a { text-decoration:none; outline:none; border:none; color:#000; cursor:pointer; }
img { outline:none; border:none; }

h1,h2,h3,h4,h5,h6,p,span,div,header,banner,nav,footer,figure,section,aside,sidebar,article,container,img,li,ul,ol { margin:0%; padding:0%; }
li,ul,ol { list-style:none; }

/*=============================== Embed font =======================*/
@font-face {
    font-family: 'calibriregular';
    src: url('../fonts/calibri_1-webfont.eot');
    src: url('../fonts/calibri_1-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/calibri_1-webfont.woff') format('woff'),
         url('../fonts/calibri_1-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'amplitudecondmedium';
    src: url('../fonts/AmplitudeCond-Medium.eot');
    src: url('../fonts/AmplitudeCond-Medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/AmplitudeCond-Medium.woff') format('woff'),
         url('../fonts/AmplitudeCond-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rotisserif55roman';
    src: url('../fonts/rotisserif55-webfont.eot');
    src: url('../fonts/rotisserif55-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rotisserif55-webfont.woff2') format('woff2'),
         url('../fonts/rotisserif55-webfont.woff') format('woff'),
         url('../fonts/rotisserif55-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'avenirnextltpro';
    src: url('../fonts/AvenirNextLTPro-Regular.eot');
    src: url('../fonts/AvenirNextLTPro-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/AvenirNextLTPro-Regular.woff2') format('woff2'),
         url('../fonts/AvenirNextLTPro-Regular.woff') format('woff'),
         url('../fonts/AvenirNextLTPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'avenirltstdblack';
    src: url('../fonts/AvenirLTStd-Black.eot');
    src: url('../fonts/AvenirLTStd-Black.eot?#iefix') format('embedded-opentype'),
         url('../fonts/AvenirLTStd-Black.woff2') format('woff2'),
         url('../fonts/AvenirLTStd-Black.woff') format('woff'),
         url('../fonts/AvenirLTStd-Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*=============================== Typography =======================*/
p { font-family: 'calibriregular'; font-size:15px; line-height:24px; color:#77787b; margin:0 0 10px; padding:0; }

/*=============================== Page Content =======================*/
.pagewrapper { width:100%; height:auto; margin:0 auto; display:table; overflow:hidden; }

/*------------ header ---------- */
header { width:100%; height:auto; float:left; border-bottom:1px solid #bac2d1; padding:3% 0; }
.logo { width:18%; height:auto; margin:0 auto; display:table; }
.logo img { width:100%; height:auto; }

/*------------ nav ---------- */
nav { width:100%; height:auto; float:left; }
nav ul { width:52%; height:auto; margin:0 auto; display:table; }
nav ul li a { width:auto; height:auto; float:left; padding:3% 4%; font-size:14px; text-transform:uppercase; color:#000; font-family: 'calibriregular'; }
nav ul li.select a { background:#fd823b url(../images/nav_bg.png) repeat-x left bottom !important; color:#fff !important; }
nav ul li a:hover { background:#fd823b url(../images/nav_bg.png) repeat-x left bottom !important; color:#fff !important; }

/*------------ banner ---------- */
.bannerwrapper { width:100%; height:auto; margin:0 0 7%; float:left; display:table; }
.banner { width:1246px; height:auto; margin:0 auto; border:12px solid #cbcdcf; position:relative; display:table; }
.insidebanner { width:1246px; height:auto; margin:0 auto; border:12px solid #cbcdcf; position:relative; display:table; }
.insidebanner img { width:100%; height:auto; float:left; }
.inside_bluepatch { width:1000px; height:35px; position:absolute; left:123px; bottom:-35px; background:#042057; }

/*------------ Content wrapper ---------- */
.contentwrapper { width:100%; height:auto; margin:0 auto; }
.content { width:1000px; height:auto; margin:0 auto; }

.topsection { width:100%; height:auto; float:left; margin:0 0 3%; }
.seven { width:18%; height:auto; float:left; }
.seven img { width:100%; }
.welcomepara { width:85%; height:auto; float:left; margin:5% 0 0 -3%; }
.welcomepara span { width:100%; margin:0 0 2%; float:left; }

.bottomsection { width:100%; height:auto; float:left; }
.btmlft { width:30%; height:auto; float:left; margin:0 5% 0 0; }
.btmlft img { width:100%; height:auto; }
.btmrgt { width:65%; height:auto; float:left; }
.btmrgt h3 { font-family: 'calibriregular'; color:#f5821f; font-size:18px; line-height:40px; font-weight:bold; margin:0 0 2%; position:relative; overflow:hidden; }
.btmrgt p { margin:0 0 3%; }
.btmrgt ul { width:100%; height:auto; float:left; }
.btmrgt ul li { width:95%; height:auto; float:left; background:url(../images/bullet.jpg) no-repeat left 7px; font-family: 'calibriregular'; font-size:15px;line-height:24px; color:#77787b; padding:0 0 2% 5%; }

/*------------ Footer ---------- */
footer { width:100%; height:auto; float:left; background:#f3f4f2; margin:10% 0 1%; }
.footerinner { width:1000px; height:auto; margin:0 auto; display:table; background:#dddcd6; padding:1% 0 0.5%; }
.addresswrapper { width:330px; height:auto; float:left; padding:20px 50px; border-right:1px solid #c1c1be; }
.addresswrapper h3 { font-family: 'calibriregular'; font-size:20px; color:#0d285d; font-weight:bold; margin:0 0 2%; }
.addresswrapper p { font-family: 'calibriregular'; font-size:14px; color:#0d285d; line-height:20px; }
.socialmedia { width:200px; height:auto; float:left; padding:45px 50px 14px; border-right:1px solid #c1c1be; }
.socialmedia p { font-family: 'calibriregular'; font-size:14px; color:#0d285d; line-height:20px; }
.copyright { width:auto; height:auto; float:left; padding:75px 50px 0; }
.copyright p { font-family: 'calibriregular'; font-size:14px; color:#0d285d; line-height:20px; }

/*------------ About Us ---------- */
.aboutus { width:100%; height:auto; float:left; }
.aboutus_left { width:30%; height:auto; float:left; margin:0 5% 0 0; position:relative; }
.aboutus_left img { width:100%; height:auto; }
.aboutus_right { width:65%; height:auto; float:left; }
.aboutus_right h3 { font-family: 'calibriregular'; color:#f5821f; font-size:18px; line-height:40px; font-weight:bold; margin:0 0 3%; position:relative; overflow:hidden; }
.aboutus_right p { margin:0 0 3%; }
.aboutus_right ul { width:100%; height:auto; float:left; }
.aboutus_right ul li { width:95%; height:auto; float:left; background:url(../images/bullet.jpg) no-repeat left 7px; font-family: 'calibriregular'; font-size:15px;line-height:24px; color:#77787b; padding:0 0 3% 4%; }
.abt_trademark { width:50%; height:auto; position:absolute; left:-26%; bottom:8%; }
.abt_trademark img { width:100%; height:auto; }
.devider { width:100%; float:left; border-top:1px solid #c6ccd9; border-bottom:none; border-left:none; border-right:none; margin:10px 0 40px; padding:0; }

/*=============================== Contact us =======================*/
.contactwrapper { width:96%; height:auto; float:left; padding:0 2%; }
.contactaddress { width:43%; height:auto; float:left; padding:0 3% 0 0; margin:0 6% 0 0; border-right:1px solid #c6ccd9; position:relative; }
.contactaddress h3 { font-family: 'rotisserif55roman'; font-size:22px; color:#f68320; font-weight:normal; margin:0 0 12%; }
.contactaddress p { width:100%; font-family: 'calibriregular'; font-size:15px; font-weight:bold; line-height:18px; float:left; margin:0 0 12%; }
.contactaddress span { font-family: 'calibriregular'; font-size:14px; color:#0d285d; line-height:18px; float:left; margin:0 0 50px;}
.contactaddress span a { color:#0d285d; }
.contactaddress span a:hover { color:#000; }

.trademark_contact { width:38%; position:absolute; right:2%; top:0px; }
.trademark_contact img { width:100%; }

.mapwrapper { width:420px; height:auto; float:left; border:12px solid #cbcdcf; }
.mapwrapper img { width:100%; height:auto; float:left; }

.contact_socialmedia { width:60%; padding:5% 5% 1% 3%; float:left; border-right:1px solid #c1c1be; }
.contact_socialmedia p { font-family: 'calibriregular'; font-size:14px; color:#0d285d; line-height:20px; }
.contact_copyright {  padding:5% 5% 1% 3%; float:left; }
.contact_copyright p { font-family: 'calibriregular'; font-size:14px; color:#0d285d; line-height:20px; float:left; }

/*=============================== Enquiry =======================*/
.enquirywrapper { width:100%; height:auto; float:left; position:relative; }
.formwrapper { width:68%; height:auto; float:left; padding:0 5%; }
.formwrapper h3 { font-family: 'rotisserif55roman'; font-size:22px; color:#f68320; font-weight:normal; margin:0 0 50px; }
.formrow { width:100%; height:auto; float:left; margin:0 0 15px; }
.label { width:30%; height:auto; float:left; padding:0 8% 0 0; font-family: 'calibriregular'; font-size:15px; color:#77787b; line-height:28px; text-align:right; float:left; }
.inputfield, .selectfield, .txtarea { width:408px; height:auto; float:left; border:1px solid #c2c2c2; padding:5px; font-size:13px; color:#77787b; }
.selectfield { width:420px; }
.txtarea { width:408px; height:100px; }
.btn_submit { font-family: 'calibriregular'; background:#042057; padding:15px 60px; color:#fff; font-size:15px; text-transform:uppercase; float:right; border:none; cursor:pointer; }

.trademark_enquiry { width:18%; height:auto; position:absolute; right:0px; top:0px; }
.trademark_enquiry img { width:100%; height:auto; float:left; }

/*=============================== Team =======================*/
.teamtopcontent { width:100%; height:auto; float:left; position:relative; }
.team_left { width:28%; height:auto; float:left; margin:0 5% 0 0; }
.team_left img { width:100%; }
.team_right { width:65%; height:auto; float:left; }
.team_right h3 { width:auto; height:auto; font-family: 'calibriregular'; font-size:26px; font-weight:bold; color:#0d285d; margin:0 0 20px; padding:0; text-transform:uppercase; line-height:26px; }
.team_devider { width:88%; height:1px; float:left; background:#c6ccd9; margin:0 0 8%; }
.teamintrowrapper { width:100%; height:auto; float:left; border-bottom:1px solid #c6ccd9; padding:0 0 4%; margin:0 0 4%; position:relative; }

.teamintro { width:79%; height:auto; float:left; padding:0 20% 0 5%; }
.teamintro h3 { width:100%; font-family: 'avenirnextltpro'; font-size:22px; color:#042057; padding:2% 0 2% 3%; font-weight:normal; position:relative; }
.teamintro p { padding:0 0 10px 20px; }
.corner { width:42px; height:39px; position:absolute; left:0; top:0; background:url(../images/corner.png) no-repeat left top; }
.squarebox { width:16px; height:16px; background:#969696; position:absolute; right:0; bottom:0; }
.trademark_team { width:16%; height:auto; position:absolute; right:0px; top:11%; }
.trademark_team img { width:100%; height:auto; float:left; }

/*=============================== Project =======================*/
.project { width:100%; height:auto; float:left; }
.project_left { width:auto; height:auto; float:left; position:relative; }
.project_leftimg { width:90%; height:auto; float:left; }
.project_leftimg img { width:100%; height:auto; float:left; }
.project_right { width:auto; height:auto; float:right; }
.project_rightimg { width:83%; height:auto; float:left; }
.project_rightimg img { width:100%; height:auto; float:left; }

.projectwrapper { width:100%; height:auto; float:left; }
.projectwrapper ul { width:100%; height:auto; float:left; }
.projectwrapper ul li { width:auto; height:auto; float:left; padding:20px 25px 20px 0; }
.projectimgcaption { width:231px; height:auto; float:left; }
.projecttopband { width:231px; height:auto; float:left; }
.projecttopband img { float:left; }
.projectimg { width:231px; height:auto; float:left; position:relative; }
.projectimg img { float:left; border-left:1px solid #d6d3d3; border-right:1px solid #d6d3d3; border-top:1px solid #d6d3d3; }
.projectcaption { width:209px; height:auto; float:left; border:1px solid #d6d3d3; padding:10px }
.projectcaption h3 { width:100%; height:auto; float:left; font-family: 'avenirltstdblack'; font-size:16px; color:#5b5c5e; text-transform:uppercase; 
margin:10px 0 5px; text-align:center; font-weight:normal;  }
.projectcaption p { text-align:center; margin:0; padding:0; }
.no_paddrgt { padding-right:0 !important; }

.t {
    display: table;
    width: 100%;
    height: 100%;
}

.tc {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.rel {
    position: relative;
}

/* book */

.book {
    margin: 0 auto;
    width: 90%;
    height: 90%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.book .page {
    height: 100%;
}

.book .page img {
    max-width: 100%;
    height: 100%;
}

.projectimg a span { width: 64px;
height: 64px;
background: url(../images/zoom_in.png) no-repeat left top;
left: 20px;
top: 20px;
position: absolute;
display: none;
z-index: 9999;
overflow: hidden; }
.projectimg a:hover span { display:block; position:absolute; left:90px; top:90px; overflow:hidden;}


html, body { margin: 0; height: 100%; }
        body.hide-overflow { overflow: hidden; }
        
        /* helpers */
        .t { display: table; }
        .tc { display: table-cell; vertical-align: middle; text-align: center; }
        .rel { position: relative; }
        
        /* book */
        .book { width: 1160px !important; height: 578px !important; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); opacity:1 !important; }
        .book .page img { width:100%!important; height:auto !important; opacity:1 !important; }
        .page img:hover { opacity:100 !important; }
        .page-wrapper img:hover { opacity:100 !important; }
        img { opacity:100 !important; }
        .fancybox-inner{height:578px !important;}
        .page{height:578px !important;}
        .page-wrapper { position: absolute; overflow: hidden; width: 414px; height: 500px; top: 0px; right: 0px; left: 0; z-index: 20; }