body { font-family: Roboto; margin: 0; color: #464646; font-size: 16px; font-weight: 300; background-color: #fff; line-height:1.3; } body { background-image: url(images/bg.webp); background-size: cover; background-position: top center; } img { border:none; max-width: 100%; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; } p { margin: 0px; } h1, h2, h3, h4 { margin: 0px; } h1 { font-family: "Roboto"; font-size: 35px; font-weight: 400; color: #210f29; line-height: 1; margin-bottom: 50px; padding-left: 15px; position: relative; } h1::before { content: ""; position: absolute; top: 0px; bottom: 0px; left: -60px; width: 60px; background-color: #210f29; z-index: 0; } h1 span { color: #464646; font-size: 18px; display: block; font-weight: 300; position: relative; z-index: 1; } h1 span a { text-decoration: none; } h1 span a:hover { text-decoration: underline; } h1 a.btn { margin-top: 0px; margin-left: 30px; vertical-align: top; top: 3px; position: relative; } h1.right { padding-left: 0px; padding-right: 15px; } h1.right::before { background-color: none; } h1.right::after { content: ""; position: absolute; top: 0px; bottom: 0px; right: -60px; width: 60px; background-color: #210f29; z-index: 0; } h2 { font-size: 30px; font-weight: 400; color: #210f29; margin-bottom: 30px; line-height: 1; } h3 { font-size: 22px; font-weight: 400; color: #210f29; } h4 { font-weight: 400; } ol { padding-left: 25px; } a { color: #210f29; } .wrapper {margin: auto; width: 1200px; padding: 0px 30px; box-sizing: border-box; } a.read-more { color: #9b46a7; text-decoration: none; font-weight: bold; width: 22px; height: 7px; background-image: url(images/arrow.png); display: block; margin-left: auto; padding: 15px 15px 0px 15px; background-size: auto; background-repeat: no-repeat; background-position: center right; } a.read-more:hover { background-image: url(images/arrow-hover.png); } a.read-more.wh:hover { background-image: url(images/arrow-hover-w.png); } a.btn, .button-send { background-color: #727272; color: #fff; font-size: 13px; text-decoration: none; padding: 6px 20px 7px 20px !important; line-height: 1; margin-top: 30px; display: inline-block; *display: inline; zoom: 1; } a.btn:hover, .button-send:hover { background-color: #210f29; } #sidebar { position: fixed; z-index: 1000; top: 50%; margin-top: -31px; right: 0px; display: none; } #sidebar a { white-space: nowrap; font-weight: 400; color: #eaeaea; border: solid 1px #eaeaea; text-decoration: none; line-height: 20px; padding: 20px; height: 20px; background-color: #210f29; width: 120px; text-align: center; display: inline-block; *display: inline; zoom: 1; } #sidebar a:hover { background-color: #e6e2e1; color: #464646; } .rotate { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .arrow-down { width: 0; height: 0; margin: 0 auto; transition: .8s .2s; border: 10px solid #e6e4e4; border-left-width: 15px; border-right-width: 15px; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; } .mobile { display: none !important; } /* ---------------------- header ------------------------- */ #header-holder { width: 100%; position: absolute; z-index: 100; height: 440px; background-image: url(images/header-bg.png); background-size: auto 100%; } #header-holder div.clearfix { border-bottom: solid 1px #fff; } .inner #header-holder { background: none; position: relative; height: auto; height: initial; } .inner #header-holder div.clearfix { border-bottom: solid 1px #210f29; } #logo { float:left; position: relative; padding: 25px 0px; } #logo a, #logo a img { display:block; height: 90px; margin: auto; } #main-menu { float: right; } #menu a { padding-top: 95px; padding-bottom: 21px; } #menu a:hover, #menu a.active { } .inner #menu a, .inner #menu a:visited { color: #5c5c5c; } .inner #menu a.active, .inner #menu :hover > a { color: #210f29; border-bottom: solid 4px #210f29; } #mobile-menu {display: none; } @keyframes zoom { 0% { background-size: 100% auto; } 50% { background-size: 120% auto; } 100% { background-size: 100% auto; } } @keyframes leftright { 0% { transform: translateX(0%); } 50% { transform: translateX(8%); } 100% { transform: translateX(0%); } } /* ------------------------- banner zone -------------------- */ .nivoSlider img {width: 100%; height: inherit; } #banner-zone { position: relative; height: 850px; } #banner-zone::before { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(0,0,0,0.2); z-index: 0} .nivo-controlNav { left: 10%; position: absolute; z-index: 6; width: 80%; bottom: 50px; text-align: center; } .nivo-controlNav a { background-image: url(images/bullet.png); background-repeat: no-repeat; height: 10px; width: 10px; margin: 10px; text-indent:-20000px; display: inline-block; } .nivo-controlNav a.active { background-image: url(images/bullet-active.png); } .nivoSlider, .nivo-slice { height: 100%} #banner-zone .banner-bottom-line { background-color: #35a2b9; width: 39%; height: 15px; } .nivo-directionNav a {top: 45% !important; color: transparent !important; } /*#banner-zone .nivo-caption {display:block!important;top:37% !important; }*/ #banner-zone .nivo-caption h4.slide-h4 { font-size: 14px !important; letter-spacing: 2px !important; padding: 5px 0 12px 0 !important; line-height: 1.7; margin-left: 5% !important; } .nivo-prevNav, .nivo-nextNav {top:57% !important; } .nivo-caption { background-image: url('images/caption-bg.png'); background-repeat: repeat; padding: 50px 8% !important; width: 50% !important; height: auto; top:35% !important; } .nivo-caption h3{font-family: 'Roboto'; font-size: 30px !important; font-weight: bold !important; letter-spacing: 5px; width: 75% !important; line-height: 1.2; margin: 0px; text-transform: uppercase; } .nivo-caption p {font-size: 14px !important; letter-spacing: 2px !important; padding: 10px 0px 0px 0px !important; line-height: 1.5; text-transform: uppercase; } .nivo-html-caption { display: none !important; } #slugmenu {background-color: #727272; padding: 10px 0; } #slugmenu-container { font-size: 14px; } #slugmenu-container a { text-decoration: none !important; } #slugmenu .separator { margin:0 10px; } .slicknav_nav ul { margin:0 0 0 0; } .slicknav_nav a {padding: 8px 10px; padding: 0; } #content { padding: 60px 0px 150px 0px; } body.projects-details #content { padding-bottom: 0px; } #content .text ol li { padding-left: 10px; } #content h1 { margin-left: 60px; margin-bottom: 35px; } /* -------------------- about-us ----------------- */ #about-us { position: relative; background-size: cover; display: table; height: 100%; box-sizing: border-box; } #about-us h1 { margin-left: 0px; } #about-us > div { display: table-cell; padding: 80px 50px; vertical-align: middle; } #about-us .col1::before { content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; width: 55%; background-color: rgba(0,0,0,0.15); z-index: 0; } #about-us .col1 img { display: none; } #about-us .col2 { width: 45%; } #about-us .col2::before { content: ""; position: absolute; top: 0px; bottom: 0px; right: 0px; width: 45%; background-color: rgba(255,255,255,0.8); z-index: 0; } #about-us .text { background-color: rgba(222, 217, 216, 0.8); padding: 50px 60px; position: relative; z-index: 10; } #about-us .item { text-decoration: none; margin: 20px 0px; display: block; letter-spacing: 2px; border-right: solid 1px #210f29; padding-right: 15px; color: #464646; } #about-us .item:hover { text-decoration: underline; } #about-us .item > h2 { font-weight: 300; font-size: 16px; } #about-us p { margin: 0px; font-weight: normal; padding-left: 15px; } #team { margin-top: 25px; } #team img { display: block; } /* ---------------------- Why Us ------------------- */ #about-co { position: relative; background-size: cover; } #about-co .wrapper { display: table; height: 100%; } #about-co .wrapper > div { display: table-cell; width: 50%; padding: 150px 100px 150px 0px; vertical-align: middle; } #about-co .wrapper .col1::before { content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; width: 50%; background-color: rgba(255,255,255,0.7); z-index: 0; } #about-co .text { background-color: rgba(222, 217, 216, 0.8); padding: 50px 60px; position: relative; z-index: 10; } #about-co .text a { margin-top: 50px; } #about-co p { margin: 0px; font-weight: normal; padding-left: 15px; } #our-awards { position: relative; overflow: hidden; } #our-awards .bg { position: absolute; background-size: cover; top: 0px; height: 110%; width: 110%; left: -10%; top: -5%; animation: leftright 50s infinite; -webkit-animation: leftright 50s infinite; background-position: -20% center; } #our-awards .wrapper { display: table; height: 100%; } #our-awards .wrapper > div { display: table-cell; width: 50%; padding: 150px 100px 150px 0px; vertical-align: middle; } #our-awards .wrapper .col1::before { content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; width: 50%; background-color: rgba(255,255,255,0.7); z-index: 0; } #our-awards .text { background-color: rgba(222, 217, 216, 0.8); padding: 50px 60px; position: relative; z-index: 10; } #our-awards .text a { margin-top: 50px; display: block; width: auto; background-position: center; } #our-awards p { margin: 0px; font-weight: normal; padding-left: 15px; } #our-awards img { width: 250px; } #about-whyus { margin: 25px 0px 100px 0px; } #about-whyus h3 { margin: 30px 0px 20px 0px; } #about-whyus img { height: 90px; display: block; } #about-whyus .item { margin-right: 2%; width: 23.5% !important; float: left; background-color: rgba(222, 217, 216, 0.8); padding: 50px 30px; box-sizing: border-box; border: solid 1px #e1dcdc; } #about-whyus .item.title { background-color: #210f29; color: #fff; display: table; } #about-whyus .item.title > div { display: table-cell; vertical-align: middle; } #about-whyus .item.title h1 { padding-left: 0px; margin-left: 0px; } #about-whyus .item.title h1, #about-whyus .item.title h1 span { color: #fff; } #about-whyus .item.title h1::before { background: none; } #about-whyus .item:last-child { margin-right: 0px; } /* -------------------- our service ----------------- */ #h-services { position: relative; overflow: hidden; height: 750px; } #h-services .bg { position: absolute; background-size: cover; top: 0px; height: 110%; width: 110%; left: -10%; top: -5%; animation: leftright 80s infinite; -webkit-animation: leftright 80s infinite; background-position: -20% center; } #h-services .wrapper { display: table; height: 100%; } #h-services .wrapper > div { display: table-cell; width: 50%; padding: 50px 100px 50px 0px; vertical-align: middle; } #h-services .wrapper .col1::before { content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; width: 50%; background-color: rgba(255,255,255,0.7); z-index: 0; } #h-services .text { background-color: rgba(222, 217, 216, 0.8); padding: 50px 60px; position: relative; z-index: 10; } #h-services .item { text-decoration: none; margin: 20px 0px; display: block; letter-spacing: 2px; border-left: solid 1px #210f29; padding-left: 15px; color: #464646; } #h-services .item:last-child { margin-bottom: 0px; } #h-services .item:hover { text-decoration: underline; } #h-services .item > h2 { font-weight: 300; font-size: 16px; } #h-services .item p { margin: 0px; } #services .item { display: table; height: 100%; width: 100%; background-size: cover; background-position: center; margin-bottom: 35px; } #services .item:last-child { margin-bottom: 0px; } #services .item > div { display: table-cell; width: 53%; vertical-align: middle; position: relative; box-sizing: border-box; } #services .col1::before { content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; width: 100%; background-color: rgba(255,255,255,0.7); z-index: 0; } #services .item > .text { float: left; } #services .item > .bg { float: right; } #services .item.odd > .text { float: right; } #services .item.odd > .bg { } #services .item > .bg img { display: none; } #services .wrapper .item > .text { width: 47%; position: relative; z-index: 10; padding: 100px 50px; } #services .wrapper .item .col .text { background-color: rgba(222, 217, 216, 0.8); padding: 50px; position: relative; z-index: 10; } #services .wrapper .item > .bg::before { content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; width: 100%; background-color: rgba(0,0,0,0.25); z-index: 0; } /* ---------------------- Why Us ------------------- */ #about-sean { position: relative; overflow: hidden; } #about-sean .bg { position: absolute; background-size: cover; top: 0px; height: 110%; width: 110%; left: -10%; top: -5%; animation: leftright 60s infinite; -webkit-animation: leftright 60s infinite; background-position: -20% center; } #about-sean h1::before { background: none; } #about-sean h1::after { content: ""; position: absolute; top: 0px; bottom: 0px; right: -60px; width: 60px; background-color: #210f29; z-index: 0; } #about-sean .wrapper { display: table; height: 100%; } #about-sean .wrapper > div { display: table-cell; width: 50%; padding: 150px 0px 150px 100px; vertical-align: middle; } #about-sean .wrapper .col2::before { content: ""; position: absolute; top: 0px; bottom: 0px; right: 0px; width: 50%; background-color: rgba(255,255,255,0.5); z-index: 0; } #about-sean .text { background-color: rgba(222, 217, 216, 0.8); padding: 50px 60px; position: relative; z-index: 10; text-align: right; } #about-sean .item { text-decoration: none; margin: 20px 0px; display: block; letter-spacing: 2px; border-right: solid 1px #210f29; padding-right: 15px; color: #464646; } #about-sean .item:hover { text-decoration: underline; } #about-sean .item > h2 { font-weight: 300; font-size: 16px; } #about-sean p { margin: 0px; font-weight: normal; padding-right: 15px; } #about-sean .text a { margin-top: 50px; margin-right: 15px; } /* --------------------- our work ------------------ */ /* #our-work {margin-bottom: 80px; margin-top: 50px; } #our-work .item {float: left; background-size: cover; background-repeat: no-repeat; background-position: bottom; margin-top: 2%; position: relative; } #our-work .item > div { display: table; width: 100%; height: 100%; text-align: center; } #our-work .item .overlay, #our-work .item .link { display: none; } #our-work .item.title {width: 32%; margin-right: 2%; background-position: bottom; } #our-work .item.title h3 {font-size:25px; font-weight: bold; letter-spacing: 5px; line-height: 1.1; } #our-work .item.title .overlay { display: table-cell; vertical-align: middle; padding: 20px 10%; background: rgba(0, 0, 0, 0.4); color: #fff; } #our-work .item.title .overlay span {display: block; } #our-work .work-desc {padding-top: 5%; font-size: 18px; font-weight: 400; line-height: 1.3; } #our-work .top-hor {width: 66%; } #our-work .squar {width: 32%; margin-right: 2%; } #our-work .btm-ver {width: 32%; } #our-work .item.free-quote {width: 66%; } #our-work .item.free-quote a{ display: table-cell; vertical-align: middle; text-decoration: none; font-size: 28px; font-weight: normal; color: #ffffff; letter-spacing: 4px; line-height: 1; padding: 0px 10px; } #our-work .item.free-quote span {color: #e9c000; font-weight: bold; } #our-work a.cmore { width: 100%; height: 100%; position: absolute; left:0px; } #our-work a.cmore img { position: absolute; left: 20px; bottom: 20px; } #our-work a img { display: block; } */ .clearfix:after { content: ''; display: block; clear: both; } /* -------------------- our client ----------------- */ #client { padding: 80px 0px 120px 0px; position: relative; background-color: #fff; } #client .text { padding: 0px 60px; position: relative; } #client .text .col1 { position: absolute; left: 60px; width: 165px; } #client .text .col2 { position: relative; margin-left: 165px; } #client .item { border:1px solid #ebebeb; margin: 0 10px; width: 225px; float: left; } #client .item > img { margin:auto; width: 100%; height: auto; height: initial; } /* -------------------- curtain-dealers ----------------- */ #dealer {padding: 80px 0px 120px 0px; margin-top: 5%; position: relative; background-color: #fff; text-align: center; } #dealer .span_dealer{letter-spacing: 4px; font-size: 18px; font-weight: bold; color:#754f7b; } #dealer .span_dealer:before, #dealer .span_dealer:after {content: url('images/dealer-line.png'); background-repeat: no-repeat; padding: 0 10px; } #dealer h1 { font-size: 30px; display: block; color: #2e2e2e; font-weight: 600; margin: 0; line-height: 30px; letter-spacing: 4px; background: none; padding-bottom: 0px; } #dealer h1 span { font-size: 30px; } #dealer .list { margin-top: 30px; } #dealer .item { border:1px solid #ebebeb; margin: 0 12px; width: 225px; } #dealer .item > img { margin:auto; width: 100% } /* -------------------- contact us ----------------- */ #contact-us { font-weight: 400; letter-spacing: 1px; margin-bottom: 80px; } #contact-us h3 { margin-bottom: 30px; margin-top: 0px; line-height: 1; color: #fff; } #contact-us h4 { font-size: 13px; } #contact-us p { font-size: 13px; margin-bottom: 15px; } #contact-us .info { margin-left: 50px; width: 50%; float: left; } #contact-us > div { float: left; padding-right: 80px; box-sizing: border-box; text-align: left; } #contact-us .about { width: 25%; } #contact-us .about .item img { width: 150px; display: block; margin: auto; } #contact-us .contact { width: 30%; } #contact-us .row { margin-bottom: 15px; } #contact-us .row.add { margin-bottom: 50px; } #contact-us .openinghours { width: 25%; } #contact-us .social { width: 20%; padding-right: 0px; } #contact-us a { } #contact-us a:hover { text-decoration: underline; } #contact-us .social-fb, #contact-us .social-insta { float: left; margin-bottom: 20px; width: 100%; } #contact-us .social-fb img, #contact-us .social-insta img { height: 18px; float:left; margin-right: 10px; position: absolute; } #contact-us .social-fb img { left: 5px; } #contact-us .social-fb span, #contact-us .social-insta span { display: inline-block; *display: inline; zoom: 1; margin-left: 30px; } #map iframe { width: 100%; height: 480px; border: solid 1px #e1dcdc !important; } #footer .location { position: absolute; width: 50%; } /* -------------------- footer-menu ----------------- */ #footer #logo { float: none; padding: 0px 0px 49px 0px; } #footer #logo a, #footer #logo a img { height: 70px; display: inline-block; *display: inline; zoom: 1; margin: 0px; } #footer #logo span { font-size: 11px; display: block; } #footer { background-color: #2b2b2b; padding: 80px 0px 50px 0px; font-size: 13px; color: #eaeaea; position: relative; text-align: center; } #footer .copyright { font-size: 13px; font-weight: normal; letter-spacing: 1px; } /*#footer .copyright span { color: #e56159; }*/ #footer a { position: relative; text-decoration: none; font-size: 13px; color: #eaeaea; margin: 10px auto 0px auto; padding-bottom: 5px; background-position: center; } #footer li a:hover, #footer li a.active { opacity: 0.7; border-bottom: solid 1px; } #footer ul { padding: 0; margin: 0px; list-style-type: none; zoom: 1; background-color: #2b2b2b; } #footer .f-menu1 { border-bottom: 1px solid #3f3f3f; padding-bottom: 30px; margin-bottom: 30px; } #footer .f-menu1 ul { float: left; } #footer .f-menu1 ul:last-child { float: right; } #footer .f-menu1 ul li { display: inline-block; *display: inline; zoom: 1; margin-left: 15px; margin-right:15px; } #footer .f-menu1 ul li a { font-weight: 400; letter-spacing: 1px; padding-bottom: 0px; display: inline-block; *display: inline; zoom: 1; } #footer .f-menu1 ul li:first-child { margin-left: 0px; } #footer .f-menu1 ul li:last-child { margin-right: 0px; } #footer #webdesign { margin-top: 10px; color: #ccc; } #footer #webdesign a { color: #bbb; } #footer #webdesign a:hover { text-decoration: underline; } .slick-prev, .slick-next {font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 12px; height: 21px; margin-top: -10px; padding: 0; cursor: pointer; color: transparent; border: none; outline: none; background-repeat: no-repeat; background-color: transparent; z-index: 1; } .slick-prev { background-image: url(images/left.png); left: 12px; height: 7px; width: 22px; top: auto; top: initial; bottom: -35px; } .slick-next { background-image: url(images/right.png); right: 12px; height: 7px; width: 22px; top: auto; top: initial; bottom: -35px; } .slick-slider .slick-track, .slick-slider .slick-list { height: 100%; } .slick-initialized .slick-slide { background-size: cover; position: relative; } .slick-dots { position: absolute; bottom: 0px; right: 20px; display: block; padding: 0; list-style: none; text-align: left; margin-left: 20px; z-index: 10; } .slick-dots li { position: relative; display: inline-block; width: 8px; height: 8px; margin: 0 8px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; width: 8px; height: 8px; display: block; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background-image: url(images/bullet.png); background-repeat: no-repeat; background-position: center; background-color: transparent; } .slick-dots li.slick-active button { background-image: url(images/bullet-active.png); } /* --------------------- projects ------------------ */ #project .top { } #project .top > h1 { float: left; margin-bottom: 50px; } #project .category { float: left; height: 45px; } #project .category ul { margin: auto; padding-left: 0px; } #project .category ul li { float: left; list-style: none; margin-right: 30px; } #project .category ul li:last-child { margin-right: 0px; } #project .category a { /* background-color: #727272; color: #fff; */ text-decoration: none; margin:0 auto; text-align: center; padding: 12px 0px; display: inline-block; *display: inline; zoom: 1; } #project .category li .arrow-down { display: none; } #project .category .active a, #project li:hover a { /* background-color: #e6e4e4; color: #210f29; */ font-weight: 400; border-bottom: solid 4px #210f29; } #project .category .active .arrow-down, #project .category li:hover .arrow-down { display: block; } /* #project-com-sub-category{ text-align: center; padding: 15px 0; } #project-com-sub-category .cat {display: inline-block; line-height: 12px; } #project-com-sub-category .cat a { font-size: 14px; font-weight: normal; line-height: 30px; } #project-com-sub-category .cat a.active, #project-com-sub-category .cat:hover a { color: #6d4373; font-weight: bold; } #project-com-sub-category .cat > a {text-decoration: none; margin: 0px 15px; color: #8e8e8e; } #project-res-sub-category{ text-align: center; padding: 15px 0; } #project-res-sub-category .cat {display: inline-block; line-height: 12px; } #project-res-sub-category .cat a { font-size: 14px; font-weight: normal; line-height: 30px; } #project-res-sub-category .cat a.active, #project-res-sub-category .cat:hover a { color: #6d4373; font-weight: bold; } #project-res-sub-category .cat > a {text-decoration: none; margin: 0px 15px; color: #8e8e8e; } */ .project-list { margin-top: 50px; } .project-list p {text-align: center; color:white; font-weight: bold; letter-spacing: 3px; } .project-list .item { float: left; width: 31%; margin-right: 3.5%; margin-bottom: 30px; height: auto; text-decoration: none; } .project-list .item.idx1 { clear:both; } .project-list .item.last { margin-right: 0px; } .project-list .item:hover .image > div { -webkit-transform: scale(1.1); transform: scale(1.08); } .project-list .item h4 { text-align: center; line-height: 1; margin: 30px 0px 50px 0px; text-transform: uppercase; } .project-list .item h4 span { display: block; text-transform: lowercase; margin-top: 5px; } .project-list .item .image { overflow: hidden; } .project-list .item .image > div { width: 100%; height: 100%; background-size: cover; background-position: center; max-width: 100%; transition-duration: 0.8s; } .project-list .nothing{ margin-bottom: 30px; letter-spacing: 0px; } .filtered { width: 32%; margin-right: 2%; } .filter2, .filter5, .filter8, .filter11,.filter14 { margin-right: 0px !important; } #project .more {height: 54px; background-image: url('images/more.png'); text-align: center; margin-bottom: 1%; } #project .more:hover {cursor: pointer; cursor: hand; } #project .more > p {padding-top: 15px; font-size: 18px; font-weight: bold; color: #ffffff; letter-spacing: 3px; } /* --------------------- our awards ------------------ */ #our-award h1 {text-align: center; padding-top: 4%; font-family: "Roboto"; font-size: 25px; font-weight: bold; letter-spacing: 5px; color: #210f29; } #our-award p.line{text-align: center; } #our-award p.short-desc {text-align: center; text-transform: uppercase; font-size: 15px; font-weight: normal; } #our-award .pic {background-color: #F2F2F2; } #our-award .frame {} #our-award .awards-list .item { width: 32%; margin-right: 2%; float: left; } #our-award .awards-list .item.last { margin-right: 0; } #our-award .item { } #our-award .item h4 { text-align: center; padding-bottom: 40px; padding-top: 15px; } #our-award .item .image { cursor: pointer; overflow: hidden; } #our-award .item .image a { transition-duration: 0.8s; display: block; background-size: cover; background-position: center; } #our-award .item .image a:hover { -webkit-transform: scale(1.1); transform: scale(1.08); } #our-award .awards-list img { width: 100%; display: block; visibility: hidden; } .pp_gallery { display: none !important; } /* ----------------------- promotion -------------------- */ #promotion h1 {text-align: center; padding-top: 4%; font-family: "Roboto"; font-size: 25px; font-weight: bold; letter-spacing: 5px; color: #210f29; } #promotion p.line{text-align: center; } #promotion p.short-desc {text-align: center;margin-bottom: 3%; text-transform: uppercase; font-size: 15px; font-weight: normal; } #promotion .promo-item { float: left; width: 32%; margin-right: 30px; margin-bottom: 30px; background-size: cover; background-repeat: no-repeat; } #promotion .promo-item.last { margin-right: 0px; } #promotion .promo-item > div { display: table; width: 100%; height: 100%; } #promotion .overlay { background-image: url(images/overlay-bg.png); padding: 0px 20px; background-repeat: repeat; display: table-cell; vertical-align: middle; text-align: center; } #promotion .overlay > p.promo-name {color: #ffffff;font-size: 15px; font-weight: bold; text-transform: uppercase; letter-spacing: 3px; } #promotion .overlay a.cmore { margin-top: 30px; display: inline-block; *display: inline; zoom: 1; } /* ----------------------- news-and-evnets -------------------- */ #news-events h1 {text-align: center; padding-top: 4%; font-family: "Roboto"; font-size: 25px; font-weight: bold; letter-spacing: 5px; color: #210f29; } #news-events p.line{text-align: center; } #news-events p.short-desc {text-align: center; font-size: 15px; font-weight: normal; line-height: 28px; } #news-events .news-event-nth { text-align: center; } #news-events .news-events-list {margin-top: 30px; margin-bottom: 2px; background-color: #f6f6f6; height: auto; width: 100%; } #news-events .news-events-list > .list > .list-odd, #news-events .news-events-list > .list-even {width: 100%; } #news-events .news-events-list > .list > .list-odd > .pic > img {width: 100%; display: block; } #news-events .news-events-list > .list > .list-odd > .pic {float: left; width: 47%; background-size: cover; background-position: center; } #news-events .news-events-list > .list > .list-odd > .content {float: left; width: 53%; } #news-events .news-events-list > .list > .list-even > .pic > img {width: 100%; display: block; } #news-events .news-events-list > .list > .list-even > .pic {float: right; width: 47%; background-size: cover; background-position: center; } #news-events .news-events-list > .list > .list-even > .content {float: left; width: 53%; } #news-events .content > div { display: table; height: 100%; } #news-events .content > div > div { display: table-cell; vertical-align: middle; padding: 80px 35px; } #news-events .content p.date { color: #754f7b; font-size: 15px; font-weight: 600; } #news-events .content h2 { font-family: "Roboto"; text-transform: uppercase; background-image: url(images/title-line.png); background-repeat: no-repeat; background-position: bottom left; padding-bottom: 25px; margin-bottom: 20px; } #news-events a.readmore { letter-spacing: 2px; margin-top: 25px; display: inline-block; *display: inline; zoom: 1; } #news-events .more {height: 54px; background-image: url('images/more.png'); text-align: center; } #news-events .more > p {padding-top: 15px; font-size: 18px; font-weight: bold; color: #ffffff; letter-spacing: 3px; } #news-events .more:hover {cursor: pointer; cursor: hand; } #news-events .nonews { text-align: center; } /*-------------------- news-evnets-detail --------------------*/ #newsevents-detail { padding-top: 3%; text-align: center; padding-bottom: 5%; } #newsevents-detail .pic img {width: 50%; } #newsevents-detail p.date { color: #754f7b; font-size: 15px; font-weight: 600; } #newsevents-detail p.short_desc { margin-top: 12px; } #newsevents-detail h2 { font-family: "Roboto"; text-transform: uppercase; font-size: 24px; font-weight: bold; letter-spacing: 5px; } /*-------------------- service-detail --------------------*/ #service-detail h1 {text-align: center; padding-top: 3%; font-family: "Roboto"; font-size: 25px; font-weight: bold; letter-spacing: 5px; color: #210f29; } #service-detail p.line{text-align: center; } #service-detail p.long-desc {/*padding: 0 80px;*/ text-align: center; font-size: 15px; font-weight: normal; line-height: 28px; } #service-detail .gallery-list {width: 100%; margin-top: 5%; } #service-detail .gallery-list a { float: left; width: 32%; margin-right: 30px; margin-bottom: 30px; text-decoration: none; } #service-detail .gallery-list a.third { margin-right: 0px; } #gallery-item { background-size: cover; background-repeat: no-repeat; display: table; height: 100%; width: 100%; } #gallery-item-last { background-size: cover; background-repeat: no-repeat; display: table; height: 100%; width: 100%; } #gallery-item > .overlay p, #gallery-item-last > .overlay p{ display: none; } #gallery-item > .overlay-first p {color: #fff; text-align: center; font-size: 15px; } #gallery-item > .overlay-first p.title {font-size: 25px; font-weight: bold; letter-spacing: 5px; line-height: 1.2; margin-bottom: 10px; } #gallery-item > .overlay-first span {display: block; } /*#gallery-item > .overlay-first p.work-desc {padding: 0 50px; }*/ #gallery-item > .overlay-first { background: rgba(0, 0, 0, 0.5);padding: 20px 10%; display: table-cell; vertical-align: middle; } .free-quote {background-image: url('images/free-quote-bg.webp'); background-size: cover; background-position: center; height: 170px; min-height: 75px; } .free-quote > .link { display: table; text-align: center; margin: 0; width: 100%; height: 100%; } .free-quote > .link a{ display: table-cell; vertical-align: middle; line-height: 1; text-decoration: none; font-size: 28px; font-weight: normal; color: #ffffff; letter-spacing: 3px; padding: 0px 10px; } .free-quote > .link:hover{cursor: pointer; cursor: hand; } .free-quote > .link span {color: #e9c000; font-weight: 800; } /*-------------------- project-detail --------------------*/ #h-residential { background-image: url(images/bg.webp); background-size: cover; background-position: top center; } #h-residential .wrapper { padding: 120px 30px; } #h-residential h1 { margin-left: 60px; } #h-residential .list > div { float: left; box-sizing: border-box; } #h-residential .col1 { width: 60%; padding-right: 15px; } #h-residential .col1 .item { position: relative; } #h-residential .col1 .item:before { content: ""; position: absolute; bottom: 0px; right: 0px; height: 20%; width: 100%; z-index: 1; background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.7)); } #h-residential .col1 .item .image { height: 592px; } #h-residential .col1 .item .image div > div { display: table; width: 100%; height: 100%; } #h-residential .col1 .item div > h2 { color: #fff; padding: 20px; box-sizing: border-box; text-align: center; vertical-align: middle; display: table-cell; } #h-residential .col1 .item .nav { position: absolute; bottom: 20px; left: 20px; z-index: 10; text-align: left; } #h-residential .col1 .item .nav h4 { color: #fff; display: block; } #h-residential .col1 .item .nav a.btn { margin-top: 5px; float: none; } #h-residential .col2 { width: 40%; padding-left: 15px; } #h-residential .col2 .item { display: block; position: relative; } #h-residential .col2 .item:first-child { margin-bottom: 30px; } #h-residential .col2 .item:hover .image div > div { visibility: visible; } #h-residential .col2 .item .image div > div { visibility: hidden; display: table; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); } #h-residential .col2 .item div > h2 { color: #fff; padding: 20px; box-sizing: border-box; text-align: center; vertical-align: middle; display: table-cell; font-size: 20px; } #h-residential .col2 .item div > h2 a.btn { display: block; width: 75px; margin: 20px auto 0px auto; float: none; } #h-residential .image > div { background-size: cover; background-position: center; } #h-residential .nav { text-align: right; } #h-residential .nav h4 { display: inline-block; *display: inline; zoom: 1; margin-top: 33px; vertical-align: top; margin-right: 20px; } #h-residential a.btn { float: right; } #h-commercial { background-image: url(images/bg.webp); background-size: cover; background-position: top center; } #h-commercial .wrapper { padding: 120px 30px; } #h-commercial h1 { margin-left: 60px; } #h-commercial .list > div { float: left; box-sizing: border-box; } #h-commercial .col1 { width: 60%; padding-left: 15px; } #h-commercial .col1 .item { position: relative; } #h-commercial .col1 .item:before { content: ""; position: absolute; bottom: 0px; right: 0px; height: 20%; width: 100%; z-index: 1; background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.7)); } #h-commercial .col1 .item .image div > div { display: table; width: 100%; height: 100%; } #h-commercial .col1 .item div > h2 { color: #fff; padding: 20px; box-sizing: border-box; text-align: center; vertical-align: middle; display: table-cell; } #h-commercial .col1 .item .nav { position: absolute; bottom: 20px; left: 20px; z-index: 10; text-align: left; } #h-commercial .col1 .item .nav h4 { color: #fff; display: block; } #h-commercial .col1 .item .nav a.btn { margin-top: 5px; } #h-commercial .col2 { width: 40%; padding-right: 15px; } #h-commercial .col2 .item { display: block; position: relative; } #h-commercial .col2 .item:first-child { margin-bottom: 30px; } #h-commercial .col2 .item:hover .image div > div { visibility: visible; } #h-commercial .col2 .item .image div > div { visibility: hidden; display: table; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); } #h-commercial .col2 .item div > h2 { color: #fff; padding: 20px; box-sizing: border-box; text-align: center; vertical-align: middle; display: table-cell; } #h-commercial .col2 .item div > h2 a.btn { display: block; width: 75px; margin: 20px auto 0px auto; } #h-commercial .image > div { background-size: cover; background-position: center; } #h-commercial .nav { text-align: right; } #h-commercial .nav h4 { display: inline-block; *display: inline; zoom: 1; margin-top: 33px; vertical-align: top; margin-right: 20px; } #h-commercial a.btn { } #project-detail h1 { margin-bottom: 50px; text-transform: uppercase; font-size: 25px; margin-left: 0px !important; padding-left: 0px !important; float: left; width: 50%; } #project-detail h1::before { display: none; } #project-detail h1 span { margin-top: 5px; text-transform: lowercase; } #project-detail p.desc { float: left; width: 50%; padding-left: 15px; box-sizing: border-box; margin-top: 8px; } #project-detail { padding-bottom: 60px; } /* #project-detail .service > img { margin-bottom: -5px; } #project-detail p.short-desc {padding: 0 80px; text-align: center; font-size: 15px; font-weight: normal; line-height: 28px; } #project-detail h2 {text-align: center; margin-top: 30px; margin-bottom: 15px; font-family: "Roboto"; font-size: 20px; font-weight: bold; letter-spacing: 5px; color: #210f29; } #project-detail div.service {text-align: center; font-family: "Roboto"; font-size: 17px; font-weight: bold; color: #696969; margin-bottom: 60px; } #project-detail div.service > div { display: inline-block; *display: inline; zoom: 1; margin: 0px 30px 10px; } #project-detail div.service > div img { float: left; } */ .gallery .gallery-list .row.even .col1 { float: right; } .gallery .gallery-list .row.even .col1 a { margin-left: 15px; margin-right: 0px; } .gallery .gallery-list .row.even .col2 a { margin-left: 0px; margin-right: 15px; } .gallery .gallery-list .col { float: left; width: 50%; position: relative;} .gallery .gallery-list a { display: block; height: 415px; margin-bottom: 30px; height: auto; background-size: cover; background-repeat: no-repeat; overflow: hidden; } .gallery .gallery-list .col1 a { margin-right: 15px; } .gallery .gallery-list .col2 a { margin-left: 15px; } .gallery .gallery-list a > div { transition-duration: 0.8s; } .gallery .gallery-list a:hover > div { -webkit-transform: scale(1.1); transform: scale(1.08); } .gallery .gallery-item > div { height: 100%; background-size: cover; background-position: center; } .gallery .gallery-list .col.fullcol { width: 100%; } .gallery .gallery-list .col.fullcol > a { width: 50%; padding-right: 15px; margin-right: 0px; box-sizing: border-box; float: left; } .gallery .gallery-list .col.fullcol > a:last-child { padding-right: 0px; padding-left: 15px; } .gallery .gallery-list .row.even .col.fullcol > a { margin-left: 0px; } .gallery .gallery-list .col.single > a { padding-left: 0px !important; padding-right: 15px !important; } /* #gallery .gallery-item.last { margin-right: 0px; } #gallery .gallery-item .overlay.first { display: none; } */ /*-------------------- terms of use, policy, sitemap --------------------*/ /*-------------------- careers --------------------*/ body.career .section:first-child { padding-bottom: 0px; } #careers h1 {text-align: center; padding-top: 4%; font-family: "Roboto"; font-size: 25px; font-weight: bold; letter-spacing: 5px; color: #210f29; } #careers p.line{text-align: center; } #careers p.short-desc {text-align: center; font-size: 15px; font-weight: normal; line-height: 28px; } .section { padding: 50px 0px 60px; } .section > .wrapper { max-width: 1000px; margin: auto; } .header { background-image: url(images/arrow-minus.png); background-repeat: no-repeat; background-position: right 25px center; cursor: pointer; background-color: #210f29; color: #fff; font-size: 18px; padding: 15px 30px; } #careers { margin-top: 30px; } #careers h3 .open-list{background-color: red; } #careers h3 { padding: 20px 30px; line-height: 1; background-color: #727272; margin-bottom: 1px; color: #fff; } #careers .job h4 { margin-bottom: 10px; margin-top: 20px; margin-bottom: 15px; } #careers .job h4:first-child { margin-top: 0px; } #careers span.norecord { text-align: center; display: block; } #careers a.btn { margin-top: 0px; } .jobapplication { margin-top: 50px; } .job { margin-bottom: 1px; } .job.expand .header { border-bottom: solid 1px #999; background-image: url(images/arrow-plus.png); } .job-desc { padding: 30px; border-left: 1px solid #d6d6d6; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; margin-top: -1px; display: none; line-height: 1.4; } .job-desc > ul {width: 100%; padding-left: 25px; } .job-desc > ul > li { list-style-image: url(images/black-tick.png); width: 45%; margin-right: 5%; box-sizing: border-box; float: left; padding-left: 5px; } .closing { margin: 10px 0 10px 0px; margin-bottom: 10px; } .form-title { font-size: 25px; text-align: center; font-weight: 600; padding-top: 20px; color:#210f29; background-color: #f9f9f9; } .tbContactform, .tbRequestQuotationform { width: 100%; margin:auto; } .tbJobForm { width: 100%; margin: auto; } .tbJobForm tr, .tbContactform tr { border: none; } .tdcol-2 { width: 49% !important; border-radius: 2px; float: left; } .tdcol-2:last-child { margin-right: 0%; } .tdcol-2.last { float: right; } .tdcol-2.floorplan, .tdcol-2.resume, .tdcol-2.gender { border: none; width: 47% !important; } .tdcol-2.employed, .tdcol-2.preferred { border: none; width: 47% !important; margin-left: 2% !important; } .tdcol-2 > input { width: 100%; } .contact-form { margin-top: 10px; } .g-recaptcha { display: inline-block; *display: inline; zoom: 1; } .g-recaptcha iframe { max-width: 100%; } .radio-label { color: #6e6e6e; font-family: 'Roboto'; font-size: 15px; margin-left: 5px; } .radio-holder { float: right; width: 70%; line-height: 47px; text-align: left; } .employed .radio-holder { width: auto; float: none; } .tbSuccess { text-align: center; color: #068b56; background-color: rgba(222, 217, 216, 0.5); padding-top: 20px; } .tbErrors { text-align: center; color: #e74c3c; } .button-send { float: right; border: none !important; cursor: pointer; margin-top: 0px; } input[type="text"], input[type="file"], input[type="email"], textarea, select { padding: 15px 20px; font-family: 'Roboto'; font-weight: 300; font-size: 15px; color: #5f5f5f; border: none; box-sizing: border-box; border-radius: 2px; width: 100%; } textarea { height: 200px; padding: 18px 20px; } select { padding: 15px 18px; } #tbRequestQuotationform label, #tbRequestQuotationform tdcol-2, #tbJobForm label, #tbJobForm tdcol-2, label { color: #6e6e6e; font-size: 15px; } #tbRequestQuotationform td, #tbJobForm td,#tbContactform td { padding-top: 15px; padding-left: 15px; padding-right: 15px; } #tbRequestQuotationform h4.title { margin-top: 30px; } #tbContactform > table > tbody > tr > td.col:first-child > .tdcol,#tbRequestQuotationform > table > tbody > tr > td.col:first-child > .tdcol { width: 92%; } #position, #employed { width: 49.2%; padding: 10px 2%; } #tbJobForm .tdcol-2 > input { width: 70% !important; border-radius: 2px; padding: 10px 2.5%; float: right; background-color: #fff; } #tbJobForm input[type="radio"] { width: auto !important; width: initial !important; } #tbJobForm input.button-send { width: auto !important; } #tbJobForm tr:last-child td, #tbRequestQuotationform tr:last-child td, #tbContactform tr:last-child td { padding-bottom: 15px; } label[for="resume"], label[for="gender"], label[for="employed"], label[for="pStartDate"], label[for="floorplan"] { display: inline-block; vertical-align: middle; float: left; line-height: 47px; padding: 0px 10px 0px 0px; } input[type="radio"] { margin-left: 5px; display: inline-block; position: relative; top: 1px; } /*-------------------- contact form --------------------*/ .contact-form.wrapper { margin-top: 50px; margin-bottom: 100px; } form { margin: auto; padding: 35px; background-color: rgba(222, 217, 216, 0.5); } .contact-form-seanid h2 {text-align: center; padding-top: 4%; font-family: "Roboto"; font-size: 25px; font-weight: bold; letter-spacing: 5px; color: #210f29; } .contact-form-seanid p.line{text-align: center; } .contact-form-seanid p.short-desc {text-align: center; font-size: 15px; font-weight: normal; padding-bottom: 3%; } .contact-form-seanid .contact-details { text-align: center; padding-bottom: 50px; } .detail-title { text-decoration:underline; } .apfe, .theader{ text-align: left !important} .tdata > a { text-decoration: none; color: #000000; } /*-------------------- request quotation form --------------------*/ .service-enquiry-form.wrapper { margin-top: 50px; } #tbRequestQuotationform { margin: auto; } #tbRequestQuotationform input.button-send { color: #fff; width: auto !important; width: initial !important; } #tbRequestQuotationform input[type="radio"] { width: auto !important; width: initial !important; } #tbRequestQuotationform #upload {float: right; width: 80% !important; padding: 10px 2%; background-color: #fff; } #tbRequestQuotationform > table > tbody > tr > td label { padding-right: 10px; position: absolute; } #tbRequestQuotationform .button-send { width: none !important; } select#pStartMth, select#pStartYr { width: 30% !important; float: right; } select#pStartYr { margin-left: 10px; } #sitemap a { text-decoration: none; } #sitemap div > ul { margin: 0px; padding-left: 30px; } #sitemap ul { list-style-type: square; } #sitemap ul li { margin: 5px 0px; } #sitemap ul a { } #whatsapp { position: fixed; right: 100px; bottom: 15px; width: 60px; height: 60px; background-image: url(images/icon-whatsapp.png); background-repeat: no-repeat; background-size: cover; box-shadow: 2px 2px 10px rgb(0 0 0 / 20%); border-radius: 50px; z-index: 2147483640; text-decoration: none; } #whatsapp:hover { background-image: url(images/icon-whatsapp-overlay.png); text-decoration: none; } @media only screen and (max-width: 1280px){ h1::before { left: -50px; width: 50px; } #content h1 { margin-left: 50px; } .wrapper { width: auto; width: initial; } .nivo-controlNav { bottom: 20px; } .nivo-prevNav { left: 30px !important; } .nivo-nextNav { right: 30px !important; } #logo a, #logo a img { height: 80px; } #menu a { padding-top: 85px; } #header-holder { height: 300px; } #sidebar { right: -20px; } #h-services .wrapper { width: 100%; } #h-services .item > h2 { margin-bottom: 0px; } #h-services .text { padding: 50px; } #about-sean .text { padding: 50px; } #about-sean h1::after { right: -50px; width: 50px; } #our-awards .wrapper { width: 100%; } #our-awards .item > h2 { margin-bottom: 0px; } #our-awards .text { padding: 50px; } #h-residential h1 { margin-left: 50px; } #h-residential .wrapper { padding: 100px 30px; } #h-commercial .wrapper { padding: 100px 30px; } #client .text { padding: 0px 50px; } #client .text .col1 { left: 50px; } #content { padding: 60px 0px 100px 0px; } #about-us .text { padding: 50px; } #about-us .col2 { padding: 50px; } #about-us p { padding-left: 0px; } } @media only screen and (max-width: 1200px){ } @media only screen and (max-width: 1080px){ body { font-size: 15px; } h1 { margin-bottom: 35px; } #logo { padding: 20px 0px; } #logo a, #logo a img { height: 65px; } #menu { font-size: 15px; } #menu a { padding-top: 66px; padding-bottom: 15px; } #sidebar a { padding: 15px; } #header-holder { height: 250px; } .nivo-directionNav a { width: 30px !important; height: 30px !important; background-size: cover; } #content { padding: 50px 0px 80px 0px; } #content h1 { margin-bottom: 35px; } #h-services .wrapper > div { padding: 50px 50px 50px 20px; } #h-services .item > h2 { font-size: 15px; } #about-sean .wrapper > div { padding: 50px 20px 50px 50px; } #about-sean .text a { margin-top: 30px; } #about-us .col2 { width: 55%; } #about-us .col2::before { width: 55%; } #about-whyus { margin-bottom: 80px; } #project .top > h1 { margin-bottom: 35px; } #our-awards .wrapper > div { padding: 50px 50px 50px 20px; } #our-awards .item > h2 { font-size: 15px; } #our-awards .text a { margin-top: 30px; } #h-residential .wrapper { padding: 80px 30px; } #h-commercial .wrapper { padding: 80px 30px; } #services .wrapper .item .col .text { padding: 35px; } .slick-next, .slick-prev { bottom: -25px; } #client { padding: 80px 0px 100px 0px; } #contact-us .about { float: none; padding-right: 0px; width: auto; width: initial; } #contact-us .contact { width: 40%; } #contact-us .openinghours { width: 35%; } form { padding: 20px; } select#pStartMth, select#pStartYr { width: 26% !important; } #footer .f-menu1 ul { float: none !important; } } @media only screen and (max-width: 1024px) { #menu a, #menu a:visited { margin-left: 35px; } h2 { font-size: 25px; margin-bottom: 25px; } .free-quote > .link a { font-size: 22px; } #map iframe { height: 400px; } } @media only screen and (max-width: 950px) { .tdcol-2, .tdcol-2.floorplan, .tdcol-2.resume, .tdcol-2.gender, .tdcol-2.employed { width: 100% !important; } .tdcol-2.last { margin-top: 15px; } .tdcol-2.employed, .tdcol-2.preferred { margin-left: 0px !important; } .tdcol-2.preferred { width: auto !important; width: initial !important; } #tbRequestQuotationform > table > tbody > tr > td label, #tbJobForm label { position: relative; padding-left: 20px; } #tbRequestQuotationform #upload, input[type="file"], #tbJobForm .tdcol-2 > input { width: 75% !important; } .radio-holder { width: 75% !important; } select#pStartMth, select#pStartYr { width: auto !important; width: initial !important; padding: 14px 18px; } #about-whyus .item { width: 48.5% !important; margin-right: 3%; margin-bottom: 3%; } #about-whyus .item.title { margin-right: 0px; } } @media only screen and (max-width: 850px) { h1 { font-size: 30px; } h1 span { font-size: 16px; } h2 { font-size: 22px; margin-bottom: 22px; } h3 { font-size: 20px; } #h-services .wrapper .col1::before { width: 100%; } #h-services .wrapper .col1 { padding: 50px 0px; } #h-services .wrapper .col2 { display: none; } #h-services .wrapper .col2::before { width: 100%; } #about-sean .wrapper .col1 { display: none; } #about-sean .wrapper .col2 { padding: 50px 0px; } #about-sean .wrapper .col2::before { width: 100%; } #about-us { background: none !important; } #about-us > div { display: block; padding: 0px; } #about-us .col1 img { display: block; } #about-us .col1::before { display: none; } #about-us .col2 { width: 100%; padding: 0px; } #about-us .col2::before { display: none; } #our-awards .wrapper .col1::before { width: 100%; } #our-awards .wrapper .col1 { padding: 50px 0px; } #our-awards .wrapper .col2 { display: none; } #our-awards .wrapper .col2::before { width: 100%; } #services .item { background: none !important; } #services .item.odd > .bg, #services .item > .bg { height: auto !important; height: initial !important; } #services .item.odd > .bg img, #services .item > .bg img { display: block; width: 100%; } #services .item > div { width: 100%; } #services .wrapper .item > .text { width: 100%; padding: 0px; } #services .wrapper .item > .bg::before { display: none; } #sidebar a { padding: 12px; } #careers h3 { padding: 18px 25px; } .header { padding: 12px 25px; font-size: 16px; } .free-quote > .link a { font-size: 20px; } } @media only screen and (max-width: 768px) { body { font-size: 14px; } h1 { margin-bottom: 25px; } #content h1 { margin-bottom: 25px; } #header-holder { position: relative; height: auto; height: initial; background: none; } #header-holder div.clearfix { border-bottom: none; } .slicknav_btn { background-color: #210f29 !important; margin-top: 22px; position: absolute !important; right: 30px; } .slicknav_menu .slicknav_menutxt { display: none !important; } .slicknav_menu .slicknav_icon { margin: 0px !important; } .slicknav_menu .slicknav_icon-bar { width: 30px !important; height: 3px !important; } .slicknav_btn .slicknav_icon-bar+.slicknav_icon-bar { margin-top: 4px !important; } .nivo-controlNav { bottom: 10px; } .nivo-directionNav a { width: 25px !important; height: 25px !important; } .nivo-controlNav a { height: 8px !important; width: 8px !important; } #logo { padding: 15px 0px; } #logo a, #logo a img { height: 50px; } .mobile { display: block !important; } .desktop { display: none !important; } #main-menu { float: none; } #menu {display: none; } #mobile-menu { display: block; font-size: 14px; width: 100%; } #content { padding: 35px 0px 60px 0px; } #sidebar { right: -51px; } #sidebar a { padding: 10px; } #about-sean .text a { margin-top: 20px; } #our-awards .text a { margin-top: 20px; } #about-whyus { margin-bottom: 60px; } #about-whyus .item { padding: 30px; } #about-whyus .item.title { margin-right: 3%; } #about-whyus .item.title.mobile { display: table !important; } #about-whyus .item.idx1 { margin-right: 0px; } #about-whyus h3 { margin: 20px 0px 10px 0px; } #about-whyus img { height: 65px; } #project .top > h1 { margin-bottom: 25px; float: none; } #project .category { margin-left: 0px; } .project-list .item, .project-list .item.last { width: 47.5%; margin-right: 5%; } .project-list .item.even { margin-right: 0px; } .project-list .item.idx1 { clear: none; } .project-list .item.odd { clear: both; } .project-list .item h4 { margin: 20px 0px; } #project-detail h1 { float: none; width: auto; width: initial; margin-bottom: 15px; } #project-detail p.desc { float: none; width: auto; width: initial; padding-left: 0px; margin-bottom: 25px; } .gallery .gallery-list .col1 a { margin-right: 5%; margin-bottom: 22px; } .gallery .gallery-list .col2 a { margin-left: 5%; margin-bottom: 22px; } .gallery .gallery-list .row.even .col2 a { margin-right: 5%; } .gallery .gallery-list .row.even .col1 a { margin-left: 5%; } .arrow-down { margin-bottom: 5px; } #h-residential .wrapper { padding: 60px 30px; } #h-residential .col1 { width: 100%; padding-right: 0px; padding-bottom: 30px; } #h-residential .col2 { width: 100%; padding-left: 0px; } #h-residential .col2 .item { width: 50%; float: left; box-sizing: border-box; } #h-residential .col2 .item:first-child { padding-right: 15px; } #h-residential .col2 .item:last-child { padding-left: 15px; } #h-residential .col2 .item { margin-bottom: 0px !important; } #h-commercial .wrapper { padding: 60px 30px; } #h-commercial .col1 { width: 100%; padding-left: 0px; } #h-commercial .col2 { width: 100%; padding-right: 0px; } #h-commercial .col2 .item { width: 50%; float: left; box-sizing: border-box; padding-bottom: 30px; } #h-commercial .col2 .item:first-child { padding-right: 15px; } #h-commercial .col2 .item:last-child { padding-left: 15px; } #h-commercial .col2 .item { margin-bottom: 0px !important; } #client .wrapper { padding: 0px 20px; } #client .text { padding: 0px; } #client .text .col1 { position: relative; left: 0px; width: auto; width: initial; } #client .text .col1 h1 { margin-left: 60px; } #client .text .col1 h1 br { display: none; } #client .text .col2 { margin-left: 0px; } #services .wrapper .item .col .text { padding: 30px; } .contact-form.wrapper { margin-bottom: 60px; } .job-desc > ul > li { float: none; width: auto; width: initial; margin-bottom: 5px; } #contact-us { margin-bottom: 50px; } #contact-us .contact { width: 100%; padding-right: 0px; margin-bottom: 30px; text-align: center; } #contact-us .row.add { margin-bottom: 20px; } #contact-us .row.add br { display: none; } #contact-us .row.phone { width: auto; width: initial; margin-right: 50px; display: inline-block; *display: inline; zoom: 1; } #contact-us .row.fax { width: auto; width: initial; margin-right: 50px; display: inline-block; *display: inline; zoom: 1; } #contact-us .mail { width: auto; width: initial; display: inline-block; *display: inline; zoom: 1; margin-bottom: 15px; } #contact-us .openinghours { width: 40%; text-align: center; margin-right: 5%; padding-right: 0px; float: none; display: inline-block; *display: inline; zoom: 1; } #contact-us .social { width: 40%; text-align: center; float: none; display: inline-block; *display: inline; zoom: 1; vertical-align: top; } #contact-us .social-fb, #contact-us .social-insta { float: none; display: inline-block; *display: inline; zoom: 1; } #footer { padding: 50px 0px 85px 0px; } #footer #logo { text-align: center; padding-bottom: 35px; } #footer a { font-size: 12px; } #footer .f-menu1 ul { float: none; } #footer .f-menu1 ul:last-child { margin-top: 20px; float: none; } #map iframe { height: 350px; } } @media only screen and (max-width: 600px) { h1 { font-size: 25px; margin-bottom: 20px; } h1::before { left: -40px; width: 40px; } h1 a.btn { margin-left: 15px; } h2 { font-size: 18px; margin-bottom: 18px; } h3 { font-size: 16px; } #content h1 { margin-left: 40px; margin-bottom: 20px; } #h-services .text { padding: 40px; } #about-sean .text { padding: 40px; } #about-sean h1::after { right: -40px; width: 40px; } #about-sean .text a { margin-top: 15px; } #about-us .text { padding: 40px; } #about-whyus img { height: 50px; } #our-awards .text { padding: 40px; } #our-awards .text a { margin-top: 15px; } #our-award .awards-list .item, #our-award .awards-list .item.last { width: 47.5%; margin-right: 5%; } #our-award .awards-list .item.even { margin-right: 0px !important; } #h-residential h1 { margin-left: 40px; } #h-residential .col1 { padding-bottom: 20px; } #h-residential .col2 .item:first-child { padding-right: 10px; } #h-residential .col2 .item:last-child { padding-left: 10px; } #h-residential .nav h4 { margin-top: 23px; } #h-residential .col2 .item div > h2 { font-size: 14px; } #h-residential .col2 .item div > h2 a.btn { margin-top: 15px; } #h-commercial h1 { margin-left: 40px; } #h-commercial .col2 .item { padding-bottom: 20px; } #h-commercial .col2 .item:first-child { padding-right: 10px; } #h-commercial .col2 .item:last-child { padding-left: 10px; } #h-commercial .nav h4 { margin-top: 23px; } #h-commercial .col2 .item div > h2 { font-size: 14px; } #h-commercial .col2 .item div > h2 a.btn { margin-top: 15px; } .project-list .item h4 { margin: 10px 0px; } #client { padding: 60px 0px 80px 0px; } #sitemap ul, #sitemap div > ul { padding-left: 20px; } form { padding: 15px; } form .button-send { float: none; text-align: center; display: block; margin: 15px auto 0px auto; font-size: 14px; padding: 8px 20px 9px 20px !important; } label[for="floorplan"] { margin-top: 5px; } label[for="pStartDate"] { display: block; float: none; } select#pStartMth, select#pStartYr { width: 48% !important; } select#pStartMth { float: left; } a.btn, .button-send { font-size: 12px; padding: 5px 10px 6px 10px !important; margin-top: 20px; } .tdcol-2.preferred { width: 100% !important; } .radio-holder { line-height: 2; width: auto !important; width: initial !important; float: none; } #tbRequestQuotationform #upload, input[type="file"], #tbJobForm .tdcol-2 > input { width: 100% !important; padding: 15px 18px; } #tbRequestQuotationform > table > tbody > tr > td label, #tbJobForm label { line-height: 2; float: none; display: block; } .tr-button td { text-align: center; } .g-recaptcha > div { width: 100% !important; } #map iframe { height: 300px; } } @media only screen and (max-width: 550px) { #contact-us .openinghours { display: block; width: 100%; margin-bottom: 45px; } #contact-us .social { display: block; width: 100%; } .radio-holder { padding-left: 20px; } #about-whyus .item { width: 100% !important; margin-right: 0px; margin-bottom: 20px; } #about-whyus .item:last-child { margin-bottom: 0px; } #about-whyus .item.title { float: left; } #about-whyus .item.idx1 { float: right; } .project-list { margin-top: 30px; } #project .category a { padding: 10px 0px; } #project .category ul li { margin-bottom: 10px; } } @media only screen and (max-width: 410px) { .radio-holder { width: auto !important; width: initial !important; } select#pStartMth, select#pStartYr { width: 45% !important; } #project .category a { font-size: 13px; } #project .category ul li { margin-right: 20px; } }