/* Author - Chandan Pednekar Created on - 27.09.2015 Description - Styles for main content */ @import url("meyer_css_reset.css"); @import url("https://fonts.googleapis.com/css?family=Glegoo:400,700,800"); /* BASE STYLES */ body { font-size: 16px; text-align: center; margin: 0; padding: 0; text-rendering: geometricPrecision; } body { counter-reset: empanelment_count esteemed_client_count; } header { width: 100%; overflow: visible; position: fixed; z-index: 9999; background-image: url('../image/background/cream_dust.png'); border-bottom: .1em solid #B63149; } #main-content { width: 100%; position: relative; float: left; background-image: url('../image/background/cream_dust.png'); } #banner { width: 100%; position: relative; float: left; background-image: url('../image/background/cream_dust.png'); } #about-us { width: 100%; position: relative; float: left; height: 100%; padding-bottom: 7em; } #the-team { width: 100%; position: relative; float: left; height: 100%; padding-bottom: 5em; } #services { width: 100%; position: relative; float: left; height: 100%; padding-bottom: 5em; } #projects { width: 100%; position: relative; float: left; height: 100%; padding-bottom: 5em; } #clientele { width: 100%; position: relative; float: left; height: 100%; padding-bottom: 5em; } footer { width: 100%; position: relative; float:left; padding-bottom: 2em; background-image: url('../image/background/cream_dust.png'); } ul { list-style: none; text-align: center; } a { text-decoration: none;} /*********************************************** Common Styles ************************************************/ h3 { word-spacing: .25em; position: relative; padding: 0; margin: 1.5em auto; color: #373737; font-family: 'Glegoo', serif; font-weight: 400; line-height: 1em; } p { position: relative; padding: 0 2em; margin: 2.5em auto; font-family: 'Glegoo', serif; font-weight: 700; color: #666666; word-spacing: 0.25em; line-height: 2em; text-align: justify; } div.img { background-size: contain; background-position: center center; background-repeat: no-repeat; } hr { border: none; height: .063em; width: 100%; clear: both; background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(102, 102, 102, .75), rgba(0, 0, 0, 0)); } /********************** Header ************************************/ /* logo image */ #navbar-header #logo a div.img { background-image: url('../image/logo/rrp-abbrv-logo.png'); } /* logo text single line */ #navbar-header #logo a div.logo-text { letter-spacing: -0.025em; word-spacing: 0.25em; color: #666666; float: left; position: relative; font-family: 'Glegoo', serif; font-weight: 700; } /* logo text multi line */ #navbar-header #logo a div.logo-text-multiline { text-align: left; letter-spacing: -0.025em; word-spacing: 0.25em; color: #666666; float: left; line-height: -0.1em; font-family: 'Glegoo', serif; font-weight: 700; } /* Mobile Menu Toggle */ #nav-toggle + label { background-image: url('../image/icon/ic_menu_grey_24px.svg'); background-repeat: no-repeat; background-size: contain; float: right; margin: 1em 1em 0 0; width: 2.5em; height: 2.5em; } /* Main menu navigation */ #nav ul li a { display: block; color: #666666; font-family: 'Glegoo', serif; font-weight: 700; text-align: center; } /*#nav ul li a:hover { background-color: #762030; }*/ /* Submenu navigation */ #nav ul li ul li a { background-image: url('../image/background/crimson_red_bg.png'); color: #ffffff; } /************************* Banner **************************/ #banner #banner-logo { margin: 8em 0 0 0; } #banner #banner-logo div.img { background-image: url('../image/logo/rrp-logo.jpg'); margin: 0 auto; } #banner #banner-company-profile { margin: -2em auto 0 auto; } #banner #banner-company-profile h4 , h5 { margin: .25em auto; opacity: .75; } #banner #banner-company-profile hr { background-color: #ff0000; } #banner #banner-text, #banner-company-profile { letter-spacing: -0.01em; word-spacing: 0.25em; position: relative; line-height: 1.5em; color: #666666; font-family: 'Glegoo', serif; font-weight: 700; text-shadow: 0 0 0 #999999; padding: 0 1em; } #banner #banner-text h1:first-child:before { content: '\201C'; opacity: .5; color: #666666; } #banner #banner-text h1:first-child:after { content: '\201D'; opacity: .5; color: #666666; } /************************* About Us ****************************/ #about-us h3:nth-of-type(2) { font-weight: 700; } #about-us [id^='memb-'] { padding: 0 1em; font-family: 'Glegoo', serif; font-weight: 700; color: #373737; word-spacing: 0.2em; line-height: 2em; } #about-us [id$='-it'] div.img { background-image: url('../image/membership/memb-it.jpg'); margin: 0 auto; } #about-us [id$='-voi'] div.img { background-image: url('../image/membership/memb-voi.jpg'); margin: 0 auto; } #about-us [id$='-ca'] div.img { background-image: url('../image/membership/memb-ca.jpg'); margin: 0 auto; } #about-us p b { color: black; } /************************** Team ****************************/ #the-team div.team-container { width: 90%; margin: 0 auto; } #the-team div[class*='btn-'] { position: relative; width: 2em; height: 2em; display: inline-block; } #the-team div.btn-next { left: 10em; } #the-team div.btn-prev { left: -10em; } #the-team #member-belt { width: 100%; margin: 2em auto; } #the-team div[class*='memb-id'] { float: left; padding: 1em auto; } #the-team div[class*='memb-detail'] { float: left; padding: 0 auto; } #the-team div.memb-id div.img { margin: 0 auto; border: .1em solid #9f9f9f; } #the-team div.memb-detail h4 { letter-spacing: 0.005em; word-spacing: .1em; padding: 1em auto; color: #373737; font-family: 'Glegoo', serif; font-weight: 700; line-height: 1em; margin: 1em auto 0 auto; } #the-team div.memb-detail div.qual, div.memb-detail h5 { letter-spacing: -0.02em; word-spacing: .1em; padding: 1em auto ; font-family: 'Glegoo', serif; font-weight: 700; line-height: 1.5em; color: #9f9f9f; margin: 1em auto 0 auto; } #the-team div[class*='memb-detail'] p { word-spacing: .1em; color: #373737; line-height: 2em; display: block; padding: 1em .5em; margin: 0 auto; font-family: 'Glegoo', serif; font-weight: 700; text-align: justify; } #the-team #rrp div.img { background-image: url('../image/face/face-rrp.jpg'); } #the-team #vrp div.img { background-image: url('../image/face/face-vrp.jpg'); } #the-team #da div.img { background-image: url('../image/face/face-da.jpg'); } #the-team div.btn-next { background-image: url('../image/icon/ic_next_button.svg'); } #the-team div.btn-prev { background-image: url('../image/icon/ic_next_button.svg'); -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } /* Display only active member details/ section */ #the-team div.team-memb { display: none; } /********************** Services *******************************/ #services div.main-services { width: 90%; height: 3em; clear: both; margin: 0 0 1em 0; padding: 2em 0 0 0; word-wrap: break-word; } #services h4 { word-spacing: .1em; font-family: 'Glegoo', serif; font-weight: 700; line-height: 1.5em; color: black; text-transform: uppercase; width: auto; text-align: left; text-decoration: underline; padding: .5em 2em; margin-top: 0 auto; } #services div.main-services h4:first-child { float: left; padding: 0 .5em 0 1.5em; margin: 0 auto; text-decoration: none; } #services div.main-services h4:last-child { float: left; padding: 0; margin: 0; width: inherit; } #services div.main-services + p { margin: 1.5em auto .5em auto; padding: 1em 4em 0 4em; clear: both; } /*h4 { counter-increment: service_num; } #services h4:before { content: counter(service_num) '.'; padding: 0 .5em 0 0; font-size: 1.1em; text-decoration: none; display: inline-block; }*/ #services div.immp { padding: 0 auto; } #services h5 { letter-spacing: 0.01em; word-spacing: .2em; font-family: 'Glegoo', serif; font-weight: 700; width: 100%; margin: 0; line-height: 1em; color: black; text-transform: uppercase; padding: .5em 1em; } #services div.estate-valuation-services, div.machine-valuation-services { width: 90%; margin: 1em auto 0 auto; } #services div.estate-valuation-services h5::first-letter, div.machine-valuation-services h5:first-letter { text-transform: lowercase; } #services div.estate-valuation-services h5:before, div.machine-valuation-services h5:before { content: '\25CF'; font-size: 1.2em; padding-right: .5em; } /******************** Clientele **************************/ .corp-client div.tata-inv-logo { background-image: url('../image/logo/client-tatainv.png'); } .corp-client div.tajsats-air-logo { background-image: url('../image/logo/client-tajsatsair.jpg'); } .corp-client div.taj-hotels-logo { background-image: url('../image/logo/client-tajhotel.png'); } .corp-client div.vifor-logo { background-image: url('../image/logo/client-viforpharma.png'); } .corp-client div.keltron-logo { background-image: url('../image/logo/client-keltron.png'); } .corp-client div.hafeez-logo { background-image: url('../image/logo/client-hafeez.jpg'); } .corp-client div.tandp-logo { background-image: url('../image/logo/client-talati.jpg'); } .corp-client div.kruger-logo { background-image: url('../image/logo/client-kruger.jpg'); } .corp-client div.nss-hillspring-logo { background-image: url('../image/logo/client-nss-hillspring.png'); } .corp-client div.consulate-general-uae-logo { background-image: url('../image/logo/client-consulate-general-uae.jpg'); } .corp-client div.sec-guard-board-mumbaithane-logo { background-image: url('../image/logo/client-sec-guard-board-mumbaithane.png'); } .corp-client div.national-assc-blind-india-logo { background-image: url('../image/logo/client-national-assc-blind-india.png'); } .corp-client div.highcourt-allahabad-logo { background-image: url('../image/logo/client-highcourt-allahabad.png'); } #clientele div.client-container { width: 80%; margin: 0 auto; } #clientele div.img { margin: .5em auto; width: 90%; height: 10em; } #clientele h4 { word-spacing: .2em; position: relative; padding: 0; font-family: 'Glegoo', serif; font-weight: 600; line-height: 1em; } .corp-client, .est-client, .empanelment { width: 90%; margin: 0 auto; } .corp-client, .est-client { margin-bottom: 3em; } div.corp-client .img .tooltip { position: relative; display: inline-block; visibility: hidden; width: auto; background-color: #da2244; color: white; text-align: center; border-radius: 1em; padding: 1em 0; z-index: 1; font-size: .85em; font-weight: 800; word-spacing: 0.1em; letter-spacing: 0.05em; width: 100%; margin: 25% 0 0 0; opacity: 0; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; } div.corp-client .img:hover .tooltip { visibility: visible; opacity: 1; } div.corp-client .img:hover .tooltip::after { content: " "; position: absolute; top: 100%; left: 50%; margin-left: -0.1em; border-width: 0.1em; border-style: solid; border-color: black transparent transparent transparent; } .est-client, .empanelment { text-align: justify; } .est-client h5, .empanelment h5 { font-family: 'Glegoo', serif; display: inline-block; padding: 1em 0 0 0; font-weight: 700; display: flex; line-height: 1.5em; } .est-client h5:before { counter-increment: esteemed_client_count; content: counter(esteemed_client_count) ")"; padding-right: .5em; } .empanelment h5:before { counter-increment: empanelment_count; content: counter(empanelment_count) ")"; padding-right: .5em; } .empanelment div[class*="empanel-list"] div { font-family: 'Glegoo', serif; display: inline-block; padding: 1em 0 0 0; margin: 0 0 0 1em; font-weight: 600; } .empanelment div[class*="empanel-list"] div:before { content: '\25CF'; font-size: 1.2em; padding-right: 0.5em; } .empanelment div[class*="empanel-member"] { margin-bottom: 1em; } /*************************** Projects *********************************/ .project-container div.proj-hotel-sea-rock div.img { background-image: url('../image/project/proj-hotelsearock.jpg'); } .project-container div.proj-hotel-taj-lands-end div.img { background-image: url('../image/project/proj-hoteltajlandsend.jpg'); } .project-container div.proj-beach-land div.img { background-image: url('../image/project/proj-beachland.jpg'); } .project-container div.proj-hotel-taj-mahal div.img { background-image: url('../image/project/proj-hoteltajmahal.jpg'); } .project-container div.proj-taj-sats-cat div.img { background-image: url('../image/project/proj-tajsatscat.jpg'); } .project-container div.proj-kruger-india div.img { background-image: url('../image/project/proj-krugerindia.jpg'); } .project-container div.proj-eco-tourist-beach-resort div.img { background-image: url('../image/project/proj-ecotouristbeachresortalibaug.jpg'); } .project-container div.proj-taj-president-interior div.img { background-image: url('../image/project/proj-hoteltajpresidentint.jpg'); } #projects div.project-container { width: 80%; margin: 0 auto; } #projects p { text-align: center; } #projects div[class*='proj-'] { position: relative; overflow: hidden; } #projects div.img { margin: .5em 1em 0 1em; width: 100%; background-size: cover; } /* Transition effect for span */ /*#projects div.img + span.show-detail { top: 0; }*/ /*#projects span { display: block; width: 100%; height: 3.4em; position: relative; z-index: 1; margin: 0em 1em; -webkit-transition: top .5s; -moz-transition: top .5s; transition: top .5s; background-color: #666666; opacity: .75; padding: .5em 0em; clear: both; } #projects span h4 { word-spacing: .2em; position: relative; padding: 0; font-family: 'Glegoo', serif; font-weight: 400; line-height: 1em; } #projects span h4, #projects span h5 { color: #ffffff; }*/ #projects .project-type { width: auto; } #projects .project-type div.ic-expand-collapse { content: ''; background-image: url('../image/icon/ic_toggle_arrow_thick.svg'); width: 1em; height: 1em; margin: 1em 1em 1em 0; background-size: 100%; position: relative; display: inline-block; vertical-align: middle; transition: .4s; -web-transition: .4s; -moz-transition: .4s; } #projects .project-type h4 { word-spacing: .2em; position: relative; font-family: 'Glegoo', serif; font-weight: 600; text-align: left; line-height: 1em; margin: 1em auto; display: inline-block; vertical-align: middle; } #projects .project-type h4:hover { cursor: pointer; } #projects #project-table { width: 90%; margin: 0 auto; } #projects .project-list { display: block; opacity: 0; height: 0em; overflow: hidden; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; } #projects div.project-list-entry { word-spacing: .2em; position: relative; font-family: 'Glegoo', serif; font-weight: 400; line-height: 1.5em; margin: .5em auto .5em 1.2em; text-align: left; display: flex; } #projects div.project-list-entry:before { content: '\25CF'; font-size: 1.2em; padding: 0 .5em .5em .5em; } /********************************* Footer *************************************/ footer div[id*='icon-'] { width: 2em; height: 2em; float: left; margin: .5em 0; } footer div.social-links div[id*='icon-'] { float: none; width: 1.8em; height: 1.8em; } footer div[id*='icon-'] + p { float: left; text-align: left; margin: .5em 0; } #icon-business { background-image: url('../image/icon/ic_business_white_24px.svg'); } #icon-call { background-image: url('../image/icon/ic_call_white_24px.svg'); } #icon-smartphone { background-image: url('../image/icon/ic_smartphone_white_24px.svg'); } #icon-email { background-image: url('../image/icon/ic_email_white_24px.svg'); } footer h3 { float: left; margin: 2em auto 1em 1em; } footer div.contact-details { margin: 0 auto; padding: 0 1.5em; width: 100%; clear: both; } #icon-facebook { background-image: url('../image/icon/ic-facebook.svg'); } #icon-twitter { background-image: url('../image/icon/ic-twitter.svg'); } #icon-linkedin { background-image: url('../image/icon/ic-linkedin.svg'); } #icon-googleplus { background-image: url('../image/icon/ic-googleplus.svg'); } footer div.social-links { margin: 0 auto; padding: 0 0 0 1.5em; width: 100%; clear: both; } footer div.social-links ul { padding-bottom: 4em; margin: 0 auto; } footer div.social-links ul li { float: left; width: 33%; } footer div.social-links ul li a { display: block; width: 1.8em; height: 1.8em; margin: 0; } #icon-place { background-image: url('../image/icon/ic-place.svg'); } footer div.other-links { margin: 0 auto; padding: 0 1.5em; width: 100%; clear: both; } footer #developer-detail { margin: 1em auto 0 auto; height: .2em; } footer #developer-detail h5 { letter-spacing: 0.01em; word-spacing: .2em; font-family: 'Glegoo', serif; font-weight: 700; line-height: 1em; color: #666666; } /*footer div.other-links iframe { width: 100%; height: auto; }*/ /* End of Common Styles */ /*********************************************** Mobile first ************************************************/ /* Base Styles */ p { font-size: .8em; } h3 { font-size: 1.5em; } /* Header */ #navbar-header { height: 4em; margin: 0; padding: 0; position: relative; width: 100%; float: left; } /* Header logo */ #navbar-header #logo { height: 2em; width: auto; padding: 0.0em; margin: 1.3em 0 0 .5em; float: left; } #navbar-header #logo a div.img { display: block; height: 2em; width: 4em; } #navbar-header #logo a div.logo-text-multiline { display: none; } #navbar-header #logo a div.logo-text { display: block; font-size: 0.9em; padding: .3em 0 0 .5em; margin: -1.75em 0 0 4em; } /* Mobile navigation toggle */ #navbar-header #nav-toggle { display: none; } #nav-toggle + label { display: block; } /* Main menu navigation */ #nav { display: none; width: 100%; position: relative; float: right; } #nav.expand { display: block; } #nav ul { display: inline-block; margin-top: 0em; width: 100%; } #nav ul li { width: 100%; line-height: 1.5em; } #nav ul li a { width: 100%; padding: .5em 0 .5em 0; font-size: .8em; } /* Submenu navigation */ #nav ul li ul { display: none; margin: 0; } #nav ul li ul li a { font-size: .7em; } /* Main Content */ #main-content { } /* Banner */ #banner { height: 35em; } #banner #banner-logo div.img { width: 15em; height: 15em; } #banner #banner-company-profile { width: 17em; } #banner #banner-company-profile h4 { font-size: .9em; } #banner #banner-company-profile h5 { font-size: .7em; } #banner #banner-text { padding: 4em auto 0 auto; font-size: 1em; margin: 2.5em auto 0 auto; } /* About us */ #about-us { padding-top: 4em; } #about-us h3:nth-of-type(2) { font-size: .9em; } #about-us [id^='memb-'] { font-size: .8em; height: 10em; margin: 4em auto; } #about-us [id^='memb-'] h5 { font-size: .8em; } #about-us [id$='-it'] div.img { width: 80%; height: 80%; } #about-us [id$='-voi'] div.img { width: 80%; height: 80%; } #about-us [id$='-ca'] div.img { width: 60%; height: 80%; } #about-us [id^='memb-'] span { padding: .5em 1em; } /* The Team */ #the-team { padding-top: 4em; } #the-team div[class*='btn-'] { top: 10em; } #the-team div.memb-id { width: 100%; height: auto; clear: both; } #the-team div.memb-id div.img { width: 10em; height: 10em; } #the-team div.memb-detail { width: 100%; height: auto; clear: both; } #the-team div.memb-detail h4 { font-size: .9em; } #the-team div.memb-detail div.qual, #the-team h5 { font-size: .7em; } /* Services */ #services { padding-top: 4em; } #services div.valuation-services { padding: 2.5em 0 0 0; } #services div.main-services h4:last-child { width: 75%; } #services h4 { font-size: 1em; } #services h5 { font-size: .8em; } #services div.immp:nth-of-type(odd) { text-align: justify; } #services div.immp:nth-of-type(even) { text-align: justify; } /* Projects */ #projects { padding-top: 4em; } #projects .project-list-entry { font-size: .8em; } /*#projects div.img { height: 10em; } #projects span { height: 3.4em; } #projects span h4 { font-size: 1.1em; margin: 0 auto; } #projects span h5 { font-size: .9em; }*/ /* Clientele */ #clientele { padding-top: 4em; } #clientele h4 { font-size: 1.0em; } #clientele .est-client h5 { font-size: 0.8em; } #clientele .empanelment .empanel-list { font-size: 0.8em; } /* Footer */ footer div[id*='icon-'] + p { font-size: 0.8em; } footer div.other-links { height: 25em; } footer #developer-detail h5 { font-size: .65em; } /* End of Mobile First */ /*********************************************** Mobile - 600px ************************************************/ @media only screen and ( min-width: 37.500em ) { /* Base Styles */ p { font-size: 1em; } h3 { font-size: 1.8em; } /* Header */ #navbar-header { height: 4em; margin: 0; padding: 0; position: relative; width: 100%; float: left; } /* Header logo */ #navbar-header #logo { height: 2em; width: 20em; padding: 0.0em; margin: 1.3em 0 0 .5em; float: left; } #navbar-header #logo a div.img { display: block; height: 2em; width: 4em; } #navbar-header #logo a div.logo-text-multiline { display: none; } #navbar-header #logo a div.logo-text { display: block; font-size: 1.2em; padding: .3em 0 0 .5em; margin: -1.5em 0 0 3em; } /* Mobile navigation toggle */ #navbar-header #nav-toggle { display: none; } #nav-toggle + label { display: block; } /* Main menu navigation */ #nav { display: none; width: 100%; position: relative; float: right; } #nav.expand { display: block; } #nav ul { display: inline-block; margin-top: 0em; width: 100%; } #nav ul li { width: 100%; line-height: 1.5em; } #nav ul li a { width: 100%; padding: .5em 0 .5em 0; font-size: 1em; } /* Submenu navigation */ #nav ul li ul { display: none; margin: 0; } #nav ul li ul li a { font-size: .9em; } /* Main Content */ #main-content { } /* Banner */ #banner { height: 40em; } #banner #banner-logo div.img { width: 20em; height: 20em; } #banner #banner-company-profile { width: 20em; } #banner #banner-company-profile h4 { font-size: 1em; } #banner #banner-company-profile h5 { font-size: .8em; } #banner #banner-text { padding: 4em auto 0 auto; font-size: 1.4em; margin: 2.5em auto 0 auto; } /* About us */ #about-us { padding-top: 4em; } #about-us h3:nth-of-type(2) { font-size: 1.2em; } #about-us [id^='memb-'] { font-size: 1em; height: 15em; margin: 2.5em auto; } #about-us [id^='memb-'] h5 { font-size: .8em; } #about-us [id$='-it'] div.img { width: 80%; height: 80%; } #about-us [id$='-voi'] div.img { width: 80%; height: 80%; } #about-us [id$='-ca'] div.img { width: 60%; height: 80%; } #about-us [id^='memb-'] span { padding: .5em 1em; } /* The Team */ #the-team { padding-top: 4em; } #the-team div[class*='btn-'] { top: 10em; width: 3em; height: 3em; } #the-team div.btn-next { left: 20em; } #the-team div.btn-prev { left: -20em; } #the-team div.memb-id div.img { width: 15em; height: 15em; } #the-team div.memb-detail h4 { font-size: 1.2em; } #the-team div.memb-detail div.qual, #the-team h5 { font-size: 1em; } #the-team p { font-size: 1.1em; } /* Services */ #services { padding-top: 4em; } #services div.main-services h4:last-child { width: 90%; } #services div.main-services + p { font-size: .9em; } #services div.valuation-services { padding: 2.5em 0 0 0; } #services h4 { font-size: 1.1em; } #services h5 { font-size: .9em; } #services div.immp:nth-of-type(odd) { text-align: justify; } #services div.immp:nth-of-type(even) { text-align: justify; } /* Projects */ #projects { padding-top: 4em; } #projects .project-list-entry { font-size: .9em; } /*#projects div.img { height: 20em; } #projects span { height: 3.7em; } #projects span h4 { font-size: 1.5em; margin: 0 auto; } #projects span h5 { font-size: 1.2em; }*/ /* Clientele */ #clientele { padding-top: 4em; } #clientele h4 { font-size: 1.2em; } #clientele .est-client h5 { font-size: 1em; } #clientele .empanelment .empanel-list { font-size: 1em; } /* Footer */ footer div[id*='icon-'] + p { font-size: 1.2em; } footer div.other-links { height: 25em; } footer #developer-detail h5 { font-size: .65em; } } /* End of Mobile 600px */ /******************************* IPAD Portrait - 768px *******************************/ @media only screen and ( min-width: 48em ) { /* Base Styles */ p { font-size: 1em; } h3 { font-size: 1.8em; } /* Header */ #navbar-header { height: 5em; margin: 0; padding: 0; position: relative; width: 10em; float: left; } /* Header logo */ #navbar-header #logo { height: 4em; width: 15em; padding: .2em; margin: .5em 0 0 1em; float: left; } #navbar-header #logo a div.img { display: block; height: calc(4em - 0.4em); width: calc(4em - 0.4em); } #navbar-header #logo a div.logo-text { display: none; } #navbar-header #logo a div.logo-text-multiline { display: block; padding: .8em 0 0 .3em; font-size: 1em; margin: -3.5em 0 0 4em; } /* Mobile navigation toggle */ #nav-toggle { display: none; } #nav-toggle + label { display: none; } /* Main menu navigation */ #nav { display: block; opacity: 1; float: right; margin: 1.8em .5em 0 .5em; position: relative; width: auto; } #nav ul { list-style: none; margin: 0; padding: 0; text-align: center; } #nav ul li { float: left; position: relative; line-height: 2em; width: 6em; } #nav ul li a { display: block; padding: 0em 1em; font-size: .9em; } /* Submenu navigation */ #nav ul li ul { display: none; margin-top: 0; margin-left: 0; position: absolute; } #nav ul li ul li { width: 6em; } #nav ul li ul li a { font-size: .8em; } /* Main Content */ #main-content { } /* Banner */ #banner { height: 40em; } #banner #banner-logo div.img { width: 20em; height: 20em; } #banner #banner-company-profile { width: 22em; } #banner #banner-company-profile h4 { font-size: 1.1em; } #banner #banner-company-profile h5 { font-size: .9em; } #banner #banner-text { padding: 5em auto 0 auto; font-size: 1.6em; margin: 2.5em auto 0 auto; } /* About us */ #about-us { padding-top: 5em; } #about-us h3:nth-of-type(2) { font-size: 1.2em; } #about-us [id^='memb-'] { font-size: 1em; margin: .5em auto; height: 5em; } #about-us [id^='memb-'] h5 { font-size: .8em; } #about-us [id$='-it'] div.img { width: 100%; height: 100%; } #about-us [id$='-voi'] div.img { width: 100%; height: 100%; } #about-us [id$='-ca'] div.img { width: 70%; height: 100%; } #about-us [id^='memb-'] span { padding: 1em 1em; } /* The Team */ #the-team { padding-top: 5em; } #the-team div[class*='btn-'] { top: 10em; width: 3em; height: 3em; } #the-team div.btn-next { left: 20em; } #the-team div.btn-prev { left: -20em; } #the-team div.memb-id div.img { width: 15em; height: 15em; } #the-team div.memb-detail h4 { font-size: 1.1em; } #the-team div.memb-detail div.qual, #the-team h5 { font-size: .9em; } #the-team p { font-size: .9em; } /* Services */ #services { padding-top: 5em; } #services div.main-services h4:last-child { width: 90%; } #services div.valuation-services { padding: 3.5em 0 0 0; } #services h4 { font-size: 1.4em; } #services h5 { font-size: 1em; } #services div.immp:nth-of-type(odd) { text-align: justify; } #services div.immp:nth-of-type(even) { text-align: justify; } /* Projects */ #projects { padding-top: 5em; } #projects .project-list-entry { font-size: .9em; } /*#projects div.img { height: 10em; } #projects span { height: 3.4em; } #projects span h4 { font-size: 1em; margin: 0 auto; } #projects span h5 { font-size: .8em; color: #ffffff; }*/ /* Clientele */ #clientele { padding-top: 5em; } #clientele h4 { font-size: 1.3em; } #clientele .est-client h5 { font-size: 1em; } #clientele .empanelment .empanel-list { font-size: 1em; } /* Footer */ footer div[id*='icon-'] + p { font-size: .8em; } footer div.other-links { height: 25.575em; } footer #developer-detail h5 { font-size: .7em; } } /* End of IPAD Portrait */ /******************************* IPAD Landscape - 1024px *******************************/ @media only screen and ( min-width: 64em ) { /* Base Styles */ p { font-size: 1em; } h3 { font-size: 1.8em; } /* Header */ #navbar-header { height: 5em; margin: 0; padding: 0; width: 30em; position: relative; float: left; } /* Header logo */ #navbar-header #logo { height: 4em; width: 25em; padding: .2em; margin: .5em 0 0 1em; float: left; } #navbar-header #logo a div.img { display: block; float: left; height: calc(4em - 0.4em); width: calc(4em - 0.4em); } #navbar-header #logo a div.logo-text { display: block; padding: .8em 0 0 .3em; font-size: 1.5em; margin:0; } #navbar-header #logo a div.logo-text-multiline { display: none; padding: 0em 0 0 0.3em; font-size: 2em; margin: 0; } /* Mobile navigation toggle */ #nav-toggle { display: none; } #nav-toggle + label { display: none; } /* Main menu navigation */ #nav { display: block; opacity: 1; float: right; margin: 1.4em 1em 0 0; position: relative; width: auto; } #nav ul { list-style: none; margin: 0; padding: 0; text-align: center; } #nav ul li { float: left; position: relative; line-height: 2em; width: 6em; } #nav ul li a { display: block; padding: .3em .70em; font-size: .9em; } /* Submenu navigation */ #nav ul li ul { display: none; margin-top: 0; margin-left: 0; position: absolute; } #nav ul li ul li { width: 6em; } #nav ul li ul li a { font-size: .8em; } /* Main Content */ #main-content { } /* Banner */ #banner { height: 40em; } #banner #banner-logo div.img{ width: 20em; height: 20em; } #banner #banner-company-profile { width: 22em; } #banner #banner-company-profile h4 { font-size: 1.1em; } #banner #banner-company-profile h5 { font-size: .9em; } #banner #banner-text { padding: 5em auto 0 auto; font-size: 1.8em; margin: 2.5em auto 0 auto; } /* About us */ #about-us { padding-top: 5em; } #about-us h3:nth-of-type(2) { font-size: 1.2em; } #about-us [id^='memb-'] { font-size: 1em; margin: .5em auto; height: 10em; } #about-us [id^='memb-'] h5 { font-size: .8em; } #about-us [id$='-it'] div.img { width: 80%; height: 80%; } #about-us [id$='-voi'] div.img { width: 80%; height: 80%; } #about-us [id$='-ca'] div.img { width: 60%; height: 80%; } #about-us [id^='memb-'] span { padding: 1em 1em; } /* The Team */ #the-team { padding-top: 5em; } #the-team div[class*='btn-'] { top: 10em; width: 3em; height: 3em; } #the-team div.btn-next { left: 25em; } #the-team div.btn-prev { left: -25em; } #the-team div.memb-id div.img { width: 15em; height: 15em; } #the-team div.memb-detail h4 { font-size: 1.1em; } #the-team div.memb-detail div.qual, #the-team h5 { font-size: 1em; } #the-team p { font-size: .9em; } /* Services */ #services { padding-top: 5em; } #services div.main-services h4:last-child { width: 90%; } #services div.valuation-services { padding: 1.5em 0 0 0; } #services h4 { font-size: 1.5em; } #services h5 { font-size: 1em; } #services div.immp:nth-of-type(odd) { text-align: justify; } #services div.immp:nth-of-type(even) { text-align: justify; margin-left: -5em; } #services div.machine-valuation-services div.immp:nth-of-type(even) { margin-left: 0; } /* Projects */ #projects { padding-top: 5em; } #projects .project-list-entry { font-size: .95em; } /*#projects div.img { height: 10em; } #projects span { height: 3.4em; } #projects span h4 { font-size: .8em; margin: 0 auto; } #projects span h5 { font-size: .8em; }*/ /* Clientele */ #clientele { padding-top: 5em; } #clientele h4 { font-size: 1.3em; } #clientele .est-client h5 { font-size: 1em; } #clientele .empanelment .empanel-list { font-size: 1em; } /* Footer */ footer div[id*='icon-'] + p { font-size: 1em; } footer div.other-links { height: 27.5em; } footer #developer-detail h5 { font-size: .7em; } } /* End of IPAD Landscape */ /******************************** Desktop - 1200px and higher *********************************/ @media only screen and ( min-width: 75em ) { /* Base Styles */ p { font-size: 1em; } h3 { font-size: 1.8em; } /* Header */ #navbar-header { height: 5em; margin: 0; padding: 0; position: relative; width: 40em; float: left; } /* Header logo */ #navbar-header #logo { height: 4em; width: 35em; padding: .2em; margin: .5em 0 0 1em; float: left; } #navbar-header #logo a div.img { display: block; float: left; height: calc(4em - 0.4em); width: calc(4em - 0.4em); } #navbar-header #logo a div.logo-text { display: block; padding: 0.8em 0 0 0.3em; font-size: 1.5em; margin: 0; } #navbar-header #logo a div.logo-text-multiline { display: none; } /* Mobile navigation toggle */ #nav-toggle { display: none; } #nav-toggle + label { display: none; } /* Main menu navigation */ #nav { display: block; opacity: 1; float: right; margin: 1.3em 1em 0 0; position: relative; width: auto; } #nav ul { list-style: none; margin: 0; padding: 0; text-align: center; } #nav ul li { float: left; position: relative; line-height: 2em; width: 6em; } #nav ul li a { display: block; padding: .3em 0.70em; font-size: .9em; } /* Submenu navigation */ #nav ul li ul { display: none; margin-top: 0; margin-left: 0; position: absolute; } #nav ul li ul li { width: 6em; } #nav ul li ul li a { font-size: .8em; } /* Main Content */ #main-content { } /* Banner */ #banner { height: 40em; } #banner #banner-logo div.img { width: 20em; height: 20em; } #banner #banner-company-profile { width: 25em; } #banner #banner-company-profile h4 { font-size: 1.2em; } #banner #banner-company-profile h5 { font-size: 1em; } #banner #banner-text { padding: 5em auto 0 auto; font-size: 2em; margin: 2.5em auto 0 auto; } /* About us */ #about-us { padding-top: 5em; } #about-us h3:nth-of-type(2) { font-size: 1.2em; } #about-us [id^='memb-'] { font-size: 1em; margin: .5em auto; height: 10em; } #about-us [id^='memb-'] h5 { font-size: .8em; } #about-us [id$='-it'] div.img { width: 80%; height: 80%; } #about-us [id$='-voi'] div.img { width: 80%; height: 80%; } #about-us [id$='-ca'] div.img { width: 60%; height: 80%; } #about-us [id^='memb-'] span { padding: 1em 1em; } /* The Team */ #the-team { padding-top: 5em; } #the-team div[class*='btn-'] { top: 10em; width: 3em; height: 3em; } #the-team div.btn-next { left: 30em; } #the-team div.btn-prev { left: -30em; } #the-team div.memb-id div.img { width: 15em; height: 15em; } #the-team div.memb-detail h4 { font-size: 1.1em; } #the-team div.memb-detail div.qual, #the-team h5 { font-size: .9em; } #the-team p { font-size: .9em; } /* Services */ #services { padding-top: 5em; } #services div.main-services h4:last-child { width: 90%; } #services div.valuation-services { padding: 1.5em 0 0 0; } #services h4 { font-size: 1.5em; } #services h5 { font-size: 1em; } #services div.immp:nth-of-type(odd) { text-align: justify; } #services div.immp:nth-of-type(even) { text-align: justify; margin-left: -10em; } #services div.machine-valuation-services div.immp:nth-of-type(even) { margin-left: 0; } /* Projects */ #projects { padding-top: 5em; } #projects .project-list-entry { font-size: .95em; } /*#projects div.img { height: 10em; } #projects span { height: 3.4em; } #projects span h4 { font-size: 1em; margin: 0 auto; } #projects span h5 { font-size: .9em; }*/ /* Clientele */ #clientele { padding-top: 5em; } #clientele h4 { font-size: 1.3em; } #clientele .est-client h5 { font-size: 1em; } #clientele .empanelment .empanel-list { font-size: 1em; } /* Footer */ footer div[id*='icon-'] + p { font-size: 1.2em; } footer div.other-links { height: 30em; } footer #developer-detail h5 { font-size: .8em; } } /* End of Desktop - 1200px and higher