/* Website Name: Union Tower Website URL: http://uniontower.com.au/ Description: Main stylesheet for Union Tower Author: Caramel Creative Developer: Petr Kolarik Author URI: http://caramelcreative.com/ Version: Version: 1.0 Social Media: Facebook: https://www.facebook.com/caramelcreative Twitter: https://twitter.com/caramelcreative LinkedIn: http://www.linkedin.com/company/caramel-creative .d8888b. 888 d88P Y88b 888 888 888 888 888 8888b. 888.d88 8888b. 88888b.d88b. .d88b. 888 888 "88b 888P" "88b 888 "888 "88b d8P Y8b 888 888 888 .d888888 888 .d888888 888 888 888 88888888 888 Y88b d88P 888 888 888 888 888 888 888 888 Y8b. 888 "Y8888P" "Y888888 888 "Y888888 888 888 888 "Y8888 888 .d8888b. 888 d8b d88P Y88b 888 Y8P 888 888 888 888 888.d88 .d88b. 8888b. 888888 888 888 888 .d88b. 888 888P" d8P Y8b "88b 888 888 888 888 d8P Y8b 888 888 888 88888888 .d888888 888 888 Y88 88P 88888888 Y88b d88P 888 Y8b. 888 888 Y88b. 888 Y8bd8P Y8b. "Y8888P" 888 "Y8888 "Y888888 "Y888 888 Y88P "Y8888 */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /** * Last-index v2 * Less beautiful code * Better performance */ /************************************************************ ******************** RESET ****************************** *************************************************************/ /* * HTML5 Boilerplate * * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. * * Detailed information about this CSS: h5bp.com/css * * ==|== normalize ========================================================== */ /* ============================================================================= HTML5 display definitions ========================================================================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp, strike, strong, sub, sup, tt, var, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } /* ============================================================================= Base ========================================================================== */ /* * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units * 2. Force vertical scrollbar in non-IE * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g */ html { font-size: 100%; /*overflow-y: scroll;*/ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; font-size: 13px; line-height: 1; } body, button, input, select, textarea { font-family: Times, "Times New Roman", serif; color: #222; } /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection declarations have to be separate * Also: hot pink! (or customize the background color to match your design) */ ::-moz-selection { background: #ebebeb; color: #000000; text-shadow: none; } ::selection { background: #ebebeb; color: #000000; text-shadow: none; } /* ============================================================================= Helpers ========================================================================== */ .clearFloat { clear: both; } .hidden { position: absolute !important; left: -9999px !important; top: -9999px !important; } /* ============================================================================= Links ========================================================================== */ /*a { color: #00e; } a:visited { color: #551a8b; } a:hover { color: #06e; }*/ a:focus { outline: thin dotted; } /* Improve readability when focused and hovered in all browsers: h5bp.com/h */ a:hover, a:active { outline: 0; } /* ============================================================================= Typography ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-weight: normal; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } address { font-style: normal; } dfn, em { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } /* Redeclare monospace font family: h5bp.com/j */ pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } /* Improve readability of pre-formatted text in all browsers */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } del { text-decoration: line-through; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } small { font-size: 85%; } /* Position subscript and superscript content without affecting line-height: h5bp.com/k */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ============================================================================= Lists ========================================================================== */ ul, ol { margin: 1em 0; padding: 0; list-style: none; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } /* ============================================================================= Embedded content ========================================================================== */ /* * 1. Improve image quality when scaled in IE7: h5bp.com/d * 2. Remove the gap between images and borders on image containers: h5bp.com/e */ img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } /* * Correct overflow not hidden in IE9 */ svg:not(:root) { overflow: hidden; } /* ============================================================================= Figures ========================================================================== */ figure { margin: 0; } /* ============================================================================= Forms ========================================================================== */ form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } /* Indicate that 'label' will shift focus to the associated form element */ label { cursor: pointer; } /* * 1. Correct color not inheriting in IE6/7/8/9 * 2. Correct alignment displayed oddly in IE6/7 */ legend { border: 0; *margin-left: -7px; padding: 0; } /* * 1. Correct font-size not inheriting in all browsers * 2. Remove margins in FF3/4 S5 Chrome * 3. Define consistent vertical alignment display in all browsers */ button, input, select, textarea { font-size: 100%; padding: 0; margin: 0; vertical-align: baseline; *vertical-align: middle; } select:focus, input:focus, textarea:focus { outline: 0; } /* * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) * 2. Correct inner spacing displayed oddly in IE6/7 */ button, input { line-height: normal; *overflow: visible; } /* * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7 */ table button, table input { *overflow: auto; } /* * 1. Display hand cursor for clickable form elements * 2. Allow styling of clickable form elements in iOS */ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } /* * Consistent box sizing and appearance */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } input[type="hidden"] { display: none !important; visibility: hidden !important; height: 0px !important; } input::-webkit-input-placeholder { color: #000000; opacity: 1; filter: alpha(opacity=100); } input:-moz-placeholder { color: #000000; opacity: 1; filter: alpha(opacity=100); } input::-moz-placeholder { color: #000000; opacity: 1; filter: alpha(opacity=100); } input:-ms-input-placeholder { color: #000000; opacity: 1; filter: alpha(opacity=100); } /* * Remove inner padding and border in FF3/4: h5bp.com/l */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Remove default vertical scrollbar in IE6/7/8/9 * 2. Allow only vertical resizing */ textarea { overflow: auto; vertical-align: top; resize: vertical; } /* Colors for form validity */ input:invalid, textarea:invalid { background-color: #f0dddd; } /* ============================================================================= Tables ========================================================================== */ table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } th { text-align: left; } /************************************************************ ********************* FONTS ***************************** *************************************************************/ body, #registration form input[type=text], #registration form input[type=tel], #registration form input[type=email], #registration form input[type="password"], #registration form select, #registration form textarea { font-family: "Roboto", arial, helvetica, sans-serif; font-weight: 300; font-style: normal; } .btn, button.btn, button[type="submit"], input.btn[type="submit"], input.btn[type="button"] { font-family: "Roboto", arial, helvetica, sans-serif; font-weight: 400; font-style: normal; } .scroll-btn p, nav a, .register-link a { font-family: "Roboto", arial, helvetica, sans-serif; font-weight: 500; font-style: normal; } h1, h2, h3, h4, h5, h6, .btn.white .btnTxt, button.btn.white .btnTxt, button[type="submit"].white .btnTxt, input.btn[type="submit"].white .btnTxt, input.btn[type="button"].white .btnTxt, .gallery-nav a, #main.login .message { font-family: "Roboto", arial, helvetica, sans-serif; font-weight: 700; font-style: normal; } body { font-size: 23px; font-size: 1.4375rem; line-height: 125%; line-height: 130%; color: #000000; } h1 { font-size: 50px; font-size: 3.125rem; line-height: 125%; margin-bottom: 0; line-height: 46px; } h2, h3, h4, h5, h6 { font-size: 16px; font-size: 1rem; line-height: 125%; margin-bottom: 29px; line-height: 25px; } h1, h2, h3, h4, h5 { color: #1a6b82; margin-top: 0; letter-spacing: 1.6px; text-transform: uppercase; position: relative; } a { color: #1a6b82; text-decoration: none; outline: none; } a:hover, a.selected, a:focus, a:active { outline: none; text-decoration: underline; } h1 a, h2 a, h3 a, h4 a { text-decoration: none !important; color: inherit; } p { font-size: 23px; font-size: 1.4375rem; line-height: 125%; line-height: 130%; margin-bottom: 35px; } small { font-size: 11; display: inline-block; line-height: 130%; } .fa { padding: 0 5px; } hr { border: none; border-bottom: black solid 1px; padding: 0; margin: 10px 0; } /************************************************************ ********************* LISTS ***************************** *************************************************************/ .fmt-list li:before { content: "\bb"; float: left; margin-left: -15px; margin-top: -1px; } .article.tall ul { margin-bottom: 10px; } .article.tall ul li { list-style: none; padding-left: 15px; position: relative; margin-bottom: 10px; font-size: 23px; font-size: 1.4375rem; line-height: 125%; } .article.tall ul li span { background-image: url("../cssImages/Icons-Sprite.png"); background-position: -23px -803px; background-repeat: no-repeat; background-attachment: scroll; include: ''; display: inline-block; position: absolute; width: 4px; height: 4px; left: 0; top: 11px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .article.tall ul li span { background-image: url("../cssImages/Icons-Sprite@2x.png"); -webkit-background-size: 28px 1004px; -moz-background-size: 28px 1004px; -o-background-size: 28px 1004px; background-size: 28px 1004px; } } .bg_black .article.tall ul li span { background-position: left -803px; } .fmt-list { margin-bottom: 10px; } .fmt-list li { list-style: none; margin-left: 15px; } /************************************************************ ********************* BUTTONS *************************** *************************************************************/ .btn, button.btn, button[type="submit"], input.btn[type="submit"], input.btn[type="button"] { background: #1a6b82; text-decoration: none; font-size: 16px; font-size: 1rem; line-height: 125%; color: #ffffff; border: none; text-align: left; display: inline-block; margin: 1px; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .btn:hover, .btn:active, .btn:focus, button.btn:hover, button.btn:active, button.btn:focus, button[type="submit"]:hover, button[type="submit"]:active, button[type="submit"]:focus, input.btn[type="submit"]:hover, input.btn[type="submit"]:active, input.btn[type="submit"]:focus, input.btn[type="button"]:hover, input.btn[type="button"]:active, input.btn[type="button"]:focus { text-decoration: none; background: #238ead; } .btn.white, button.btn.white, button[type="submit"].white, input.btn[type="submit"].white, input.btn[type="button"].white { background: #ffffff; border: medium none; text-align: center; margin: 0; text-transform: uppercase; width: 230px; } .btn.white:hover, .btn.white:active, .btn.white:focus, button.btn.white:hover, button.btn.white:active, button.btn.white:focus, button[type="submit"].white:hover, button[type="submit"].white:active, button[type="submit"].white:focus, input.btn[type="submit"].white:hover, input.btn[type="submit"].white:active, input.btn[type="submit"].white:focus, input.btn[type="button"].white:hover, input.btn[type="button"].white:active, input.btn[type="button"].white:focus { background: #1a6b82; } .btn.white:hover .btnTxt, .btn.white:active .btnTxt, .btn.white:focus .btnTxt, button.btn.white:hover .btnTxt, button.btn.white:active .btnTxt, button.btn.white:focus .btnTxt, button[type="submit"].white:hover .btnTxt, button[type="submit"].white:active .btnTxt, button[type="submit"].white:focus .btnTxt, input.btn[type="submit"].white:hover .btnTxt, input.btn[type="submit"].white:active .btnTxt, input.btn[type="submit"].white:focus .btnTxt, input.btn[type="button"].white:hover .btnTxt, input.btn[type="button"].white:active .btnTxt, input.btn[type="button"].white:focus .btnTxt { color: #ffffff; } .btn.white .btnTxt, button.btn.white .btnTxt, button[type="submit"].white .btnTxt, input.btn[type="submit"].white .btnTxt, input.btn[type="button"].white .btnTxt { color: #1a6b82; padding: 10px 0px; } .btn.white .btnTxt .icon, button.btn.white .btnTxt .icon, button[type="submit"].white .btnTxt .icon, input.btn[type="submit"].white .btnTxt .icon, input.btn[type="button"].white .btnTxt .icon { background-position: center -383px; display: inline-block; float: left; width: 28px; height: 18px; margin-right: 15px; } .btn .btnTxt, button.btn .btnTxt, button[type="submit"] .btnTxt, input.btn[type="submit"] .btnTxt, input.btn[type="button"] .btnTxt { display: inline-block; padding: 10px 20px; letter-spacing: 0.6px; } .btn .btnTxt .icon, button.btn .btnTxt .icon, button[type="submit"] .btnTxt .icon, input.btn[type="submit"] .btnTxt .icon, input.btn[type="button"] .btnTxt .icon { background-image: url("../cssImages/icons-sprite.png"); background-position: center -383px; background-repeat: no-repeat; background-attachment: scroll; display: inline-block; float: right; width: 28px; height: 18px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .btn .btnTxt .icon, button.btn .btnTxt .icon, button[type="submit"] .btnTxt .icon, input.btn[type="submit"] .btnTxt .icon, input.btn[type="button"] .btnTxt .icon { background-image: url("../cssImages/icons-sprite@2x.png"); -webkit-background-size: 116px 650px; -moz-background-size: 116px 650px; -o-background-size: 116px 650px; background-size: 116px 650px; } } .scroll-btn { width: 56px; position: absolute; top: 77%; left: 50%; margin-left: -28px; margin-top: -28px; text-align: center; } .scroll-btn span { background-image: url("../cssImages/icons-sprite.png"); background-position: center -461px; background-repeat: no-repeat; background-attachment: scroll; display: inline-block; width: 18px; height: 30px; margin-bottom: 8px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .scroll-btn span { background-image: url("../cssImages/icons-sprite@2x.png"); -webkit-background-size: 116px 650px; -moz-background-size: 116px 650px; -o-background-size: 116px 650px; background-size: 116px 650px; } } .scroll-btn p { font-size: 12px; line-height: 12px; text-transform: uppercase; color: #ffffff; margin: 0; } /************************************************************ ************** GENERIC SITE WIDE STYLES ****************** *************************************************************/ html { background-color: #ffffff; } html, body { margin: 0; padding: 0; height: 100%; } /************************************************************ ********************* COMMON **************************** *************************************************************/ .hide { display: none !important; } .mobile-hide, .ipad-hide { display: block; } /* .max_width { width: 100%; max-width: 1640px; margin:0 auto; overflow: hidden; position: relative; } */ .nomargin { margin: 0 !important; } .noborder { border: none !important; } .clear { clear: both; } .txt_center { text-align: center; } .text-right { text-align: right; } .bgColor_blue { background-color: #1a6b82; } .padding-left { padding-left: 50px; } .padding-right { padding-right: 50px; } img { width: 100%; } /************************************************************ ********************** FORM ****************************** ************************************************************/ #registration { width: 100%; max-width: 450px; position: relative; margin: 0 auto; } #registration #form { float: left; width: 100%; padding: 50px 0 0 0; box-sizing: border-box; } .mobileMode #registration form .selector-wrapper { position: relative; } .mobileMode #registration form .selector-wrapper:after { content: ""; position: absolute; background-image: url("../cssImages/icons-sprite.png"); background-position: center -515px; background-repeat: no-repeat; background-color: #ffffff; background-attachment: scroll; display: inline-block; width: 35px; height: 35px; top: 1px; right: 1px; z-index: 1; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .mobileMode #registration form .selector-wrapper:after { background-image: url("../cssImages/icons-sprite@2x.png"); -webkit-background-size: 116px 700px; -moz-background-size: 116px 700px; -o-background-size: 116px 700px; background-size: 116px 700px; } } #registration form ul { margin: 0; padding: 0; list-style: none; } #registration form ul li { min-height: 33px; margin-bottom: 14px; } #registration form ul label { width: 100%; text-align: center; display: none; } #registration form .checkbox label { width: auto; float: left; } #registration form input[type=text], #registration form input[type=tel], #registration form input[type=email], #registration form input[type="password"], #registration form select, #registration form textarea { -webkit-appearance: none; -webkit-font-smoothing: antialiased; background: transparent; width: 100%; background-color: #FFF; border: solid 1px #ebebeb; border-radius: 0; padding: 8px 11px; height: 37px; box-sizing: border-box; font-size: 17px; font-size: 1.0625rem; line-height: 125%; color: #000000; } #registration form textarea { height: 100px; background: transparent; resize: none; } #registration form label { display: block; float: left; width: 100%; line-height: 25px; font-size: 15px; } #registration form button.btn, #registration form button[type="submit"], #registration form input.btn[type="submit"], #registration form input.btn[type="button"] { -webkit-font-smoothing: antialiased; font-size: 17px; font-size: 1.0625rem; line-height: 125%; border: medium none; cursor: pointer; margin: 35px 0 90px; padding: 8px 12px; border: none; width: 100%; display: block; } #registration form button.btn .icon, #registration form button[type="submit"] .icon, #registration form input.btn[type="submit"] .icon, #registration form input.btn[type="button"] .icon { background-image: url("../cssImages/icons-sprite.png"); background-position: center -593px; background-repeat: no-repeat; background-attachment: scroll; display: inline-block; float: right; width: 8px; height: 21px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #registration form button.btn .icon, #registration form button[type="submit"] .icon, #registration form input.btn[type="submit"] .icon, #registration form input.btn[type="button"] .icon { background-image: url("../cssImages/icons-sprite@2x.png"); -webkit-background-size: 116px 700px; -moz-background-size: 116px 700px; -o-background-size: 116px 700px; background-size: 116px 700px; } } #registration form input.error, #registration form select.error { border: solid 1px #d14f53; } .thankyou-ctn { width: 100%; margin-top: 37px; padding: 0 20px 70px; float: left; box-sizing: border-box; } .thankyou-ctn h4 { margin-top: 0; } /************************************************************ ********************* NAVIGATION ************************** *************************************************************/ #nav-icon { display: none; width: 70px; height: 70px; position: absolute; bottom: 0; right: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; cursor: pointer; z-index: 10; } #nav-icon a { width: 100%; height: 100%; display: block; } .no-touch #nav-icon a:hover span { background: #5068c4; } #nav-icon span { display: block; position: absolute; height: 2px; width: 26px; background: #ffffff; opacity: 1; left: 50%; margin-left: -13px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } #nav-icon span:nth-child(1) { top: 23px; } #nav-icon span:nth-child(2), #nav-icon span:nth-child(3) { top: 33px; } #nav-icon span:nth-child(4) { top: 43px; } .sidr-open #nav-icon span:nth-child(1) { top: 33px; width: 0%; margin-left: 0; } .sidr-open #nav-icon span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .sidr-open #nav-icon span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .sidr-open #nav-icon span:nth-child(4) { top: 33px; width: 0%; margin-left: 0; } nav { width: auto; margin: 0; padding: 0 0 0 65px; min-height: 0; position: relative; -webkit-transition: all 0.35s cubic-bezier(0.2, 1, 0.3, 1); -moz-transition: all 0.35s cubic-bezier(0.2, 1, 0.3, 1); -ms-transition: all 0.35s cubic-bezier(0.2, 1, 0.3, 1); -o-transition: all 0.35s cubic-bezier(0.2, 1, 0.3, 1); transition: all 0.35s cubic-bezier(0.2, 1, 0.3, 1); } nav#responsiveNav { display: none; } nav a { color: #ffffff; border-top: 10px solid transparent; padding-top: 16px; float: left; text-transform: uppercase; letter-spacing: 1.2px; font-size: 12px; font-size: 0.75rem; line-height: 125%; } nav a:hover, nav a.selected, nav a:focus, nav a:active { border-top: 10px solid #ffffff; text-decoration: none; } nav li.agents-link a:hover i, nav li.agents-link a.selected i, nav li.agents-link a:focus i, nav li.agents-link a:active i { opacity: 1; filter: alpha(opacity=100); } nav li.agents-link a span { background-image: url("../cssImages/icons-sprite.png"); background-position: center -424px; background-repeat: no-repeat; background-attachment: scroll; margin-right: 6px; width: 10px; height: 12px; display: inline-block; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { nav li.agents-link a span { background-image: url("../cssImages/icons-sprite@2x.png"); -webkit-background-size: 116px 700px; -moz-background-size: 116px 700px; -o-background-size: 116px 700px; background-size: 116px 700px; } } nav li.agents-link a i { opacity: 0.3; filter: alpha(opacity=30); font-style: normal; } nav ul { float: left; } nav ul li { display: inline-block; margin-right: 50px; } nav ul li.logout-link { display: none; } .register-link { float: right; display: none; } #desktopNav .register-link { display: inline-block; } .agent_page .register-link { display: block; } .register-link a { color: #ffffff; letter-spacing: 1.2px; text-transform: uppercase; border-top: 10px solid transparent; padding-top: 17px; float: right; font-size: 12px; font-size: 0.75rem; line-height: 125%; } .register-link a:hover, .register-link a.selected, .register-link a:focus, .register-link a:active { border-top: 10px solid transparent; text-decoration: none; opacity: 0.7; filter: alpha(opacity=70); } .register-link .icon { width: 40px; height: 10px; display: block; float: right; margin: 29px 0 0 20px; background-color: #ffffff; } .mobileMode .register-link { margin-right: 80px; } .mobileMode .register-link .icon { display: none; } .mobileMode.agent_page .register-link, .agent_page .register-link { margin-right: 0; display: inline-block !important; } .mobileMode.agent_page .register-link .icon, .agent_page .register-link .icon { display: inline-block; } .navbar-logo { background-image: url("../cssImages/union-tower-logo-navbar.png"); background-position: 0 0; background-repeat: no-repeat; background-attachment: scroll; text-indent: -99999em; position: absolute; left: -150px; top: 27px; width: 128px; height: 13px; z-index: 11; -webkit-transition: all 0.35s cubic-bezier(0.2, 1, 0.3, 1); -moz-transition: all 0.35s cubic-bezier(0.2, 1, 0.3, 1); -ms-transition: all 0.35s cubic-bezier(0.2, 1, 0.3, 1); -o-transition: all 0.35s cubic-bezier(0.2, 1, 0.3, 1); transition: all 0.35s cubic-bezier(0.2, 1, 0.3, 1); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .navbar-logo { background-image: url("../cssImages/union-tower-logo-navbar@2x.png"); -webkit-background-size: 128px 13px; -moz-background-size: 128px 13px; -o-background-size: 128px 13px; background-size: 128px 13px; } } /*********************************************** ******** FFANCYBOX - MODALS POP-UP *********** ***********************************************/ .fancybox-inner > img { width: 100%; height: auto; } /************************************************************ ********************* LAYOUT **************************** *************************************************************/ h2:before, h4:before { content: ""; position: absolute; width: 30px; height: 10px; background-color: #1a6b82; left: -50px; top: 7px; } h2:after, h4:after { content: ""; position: absolute; width: 30px; height: 10px; background-color: #1a6b82; right: -50px; top: 7px; } .agent_page h2, .agent_page h4 { color: #ffffff; } .agent_page h2:before, .agent_page h4:before { left: 0; background-color: #ffffff; } .agent_page h2:after, .agent_page h4:after { right: 0; background-color: #ffffff; } h3 span { width: 10px; height: 30px; background-color: #1a6b82; margin-right: 20px; display: inline-block; } body { -webkit-font-smoothing: antialiased; /* new addition from steve to combat safari smoothness for certain webfonts 7/11/2012 */ /* Settings for footer */ padding: 0px; margin: 0px; width: 100%; max-width: 100%; min-width: 320px; overflow-x: hidden; } #container { width: 100%; margin: 0 auto; min-height: 100%; position: relative; overflow: hidden; } header { padding: 0; /* if using drop menus */ position: fixed; width: 100%; z-index: 1100; height: 70px; background-color: transparent; } header.animateIt, .sidr-open header { background-color: #344893; } header.animateIt .navbar-logo, .sidr-open header .navbar-logo { left: 40px; } header.animateIt nav, .sidr-open header nav { padding-left: 230px; } .logo { position: absolute; text-align: center; z-index: 20; width: 801px; margin: 0; left: 50%; top: 50%; margin-top: -70px; margin-left: -400px; z-index: 10; } .agent_page .logo { width: 100%; left: 0; margin-left: 0; } .agent_page .logo .logo_header { margin: auto; } .logo .logo_header { overflow: hidden; margin: 0; width: 801px; height: 115px; background-image: url("../cssImages/union-tower-logo-desktop.png"); background-position: 0 0; background-repeat: no-repeat; background-attachment: scroll; text-indent: -99999em; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .logo .logo_header { background-image: url("../cssImages/union-tower-logo-desktop@2x.png"); -webkit-background-size: 801px 115px; -moz-background-size: 801px 115px; -o-background-size: 801px 115px; background-size: 801px 115px; } } #main { width: 100%; } .agent_page #main { padding-bottom: 125px; /* Height of the footer + padding */ min-height: 920px; } .page-banner { background: url(../images/bg-union-tower-hero.jpg) no-repeat scroll center center; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; height: 860px; width: 100%; position: relative; } .agent_page .page-banner { height: 285px; background-position: center top; } section { background-color: transparent; float: left; width: 100%; position: relative; } section .g25 { width: 25%; float: left; position: relative; } section .g30 { width: 30%; float: left; position: relative; } section .g33 { width: 33.333%; float: left; position: relative; } section .g35 { width: 35%; float: left; position: relative; } section .g50 { width: 50%; float: left; position: relative; } section .g65 { width: 65%; float: left; position: relative; } section .g75 { width: 75%; float: left; position: relative; } section .g100 { width: 100%; float: left; position: relative; } section .article { padding: 65px 50px; position: relative; } section .article p { margin: 0; } section .article.text-right h3 { display: none; } section.bgColor_blue h2, section.bgColor_blue h3, section.bgColor_blue h4, section.bgColor_blue h5, section.bgColor_blue p, section.bgColor_blue li { color: #ffffff; } section.bgColor_blue h2:before, section.bgColor_blue h2:after, section.bgColor_blue h4:before, section.bgColor_blue h4:after { background-color: #ffffff; } section.bgColor_blue .g25 .article { padding: 65px 0; } section.bgColor_blue .g75 { padding-left: 30px; } section.bgColor_blue .g75 .article { padding-right: 0; } section.bgColor_blue.padding-left { padding-bottom: 40px; } section.bgColor_blue .g25 h3 { display: inline-block; white-space: nowrap; -webkit-transform: translate(140px, 10px) rotate(-90deg); -moz-transform: translate(140px, 10px) rotate(-90deg); -o-transform: translate(140px, 10px) rotate(-90deg); transform: translate(140px, 10px) rotate(-90deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -ms-transform: translate(140px, 10px) rotate(-90deg); -ms-transform-origin: top left; position: absolute; margin: 0; line-height: 10px; right: -30px; bottom: 0; } section.bgColor_blue .g25 h3 span { height: 10px; width: 30px; background-color: #ffffff; } section#lifestyle { z-index: -1; } section#location { padding: 40px 50px 30px; } section#location .g35 img { padding-right: 30px; } section#pressrelease a:hover, section#pressrelease a:focus { color: #293975; } section#pressrelease a:focus { outline: none; text-decoration: none; } section#pressrelease a:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } section#pressrelease .article:hover::before, section#pressrelease .article:focus::before { border: 3px solid rgba(41, 57, 117, 0.5); } section#pressrelease .article:hover { text-decoration: none; } section#pressrelease .article::before { position: absolute; content: ''; top: 5px; right: 5px; bottom: 5px; left: 5px; border: 1px solid rgba(74, 74, 74, 0.075); -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } section#pressrelease .article { font-family: "didot_medium", "Times New Roman", Times, serif; padding: 45px 55px 30px; position: relative; color: inherit; background: #fff; cursor: pointer; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; width: 100%; height: auto; float: left; min-height: 450px; max-height: 600px; margin-bottom: 10px; } section#pressrelease .title--preview { -webkit-flex: 1; -ms-flex: 1; flex: 1; flex: 0 1 auto; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 100%; position: relative; } section#pressrelease .title { font-family: "didot_medium", "Times New Roman", Times, serif; margin: 0; /*font-size: 1.35em;*/ letter-spacing: 0.15em; text-transform: uppercase; text-align: center; padding: 0; line-height: 1.5em; } section#pressrelease .loader { height: 1px; width: 40%; margin: 1em auto; position: relative; background: rgba(0, 0, 0, 0.1); } section#pressrelease .category { margin: 0; position: relative; font-size: 0.55em; letter-spacing: 1px; text-align: center; display: block; } section#pressrelease .pressrelease { font-size: 0.765em; text-align: left; } section#pressrelease .pressrelease-preview .pressrelease-avatar { -webkit-filter: grayscale(50%); filter: grayscale(50%); } section#pressrelease .pressrelease-avatar { width: 100%; max-height: 200px; margin: 2em auto; overflow: hidden; position: relative; display: block; display: flex; align-items: center; align-content: center; } section#pressrelease .pressrelease-avatar img { width: 100%; margin: auto; } section#pressrelease .pressrelease-date { font-size: 0.65em; display: block; letter-spacing: 1px; float: left; color: #aaa; position: relative; } section#progress .g75 { float: none; margin-top: -30px; margin-bottom: 30px; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } section#progress .g75 img { width: auto !important; display: inline-block; } section#progress .g75 .flexslider .flex-control-nav { position: relative; margin: 15px 0px 0px 0px; text-align: center; left: 0; bottom: 0; } section#progress .g75 .flexslider .flex-control-nav li { float: none; } section#design { margin-top: -95px; } section#design .g75 { padding-left: 50px; } section#design h3 { display: inline-block; white-space: nowrap; -webkit-transform: translate(0px, 10px) rotate(-90deg); -moz-transform: translate(0px, 10px) rotate(-90deg); -o-transform: translate(0px, 10px) rotate(-90deg); transform: translate(0px, 10px) rotate(-90deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -ms-transform: translate(0px, 10px) rotate(-90deg); -ms-transform-origin: top left; position: absolute; margin: 0; line-height: 10px; left: 0; bottom: 0; } section#design h3 span { height: 10px; width: 30px; } .agent_page section .article p { max-width: 950px; margin: 0 auto; } .gallery { width: 100%; height: 548px; float: left; position: relative; background-color: #f1f1f1; overflow: hidden; } .gallery div { max-width: 1800px; width: 100%; margin: 0 auto; overflow: hidden; } .gallery div#groundFloor img { width: auto; height: 548px; } .gallery div#firstFloor { display: none; } .gallery div#firstFloor img { width: auto; height: 548px; } .gallery .drag-icon { background-image: url("../cssImages/icons-sprite.png"); background-position: center top; background-repeat: no-repeat; background-attachment: scroll; display: inline-block; position: absolute; width: 116px; height: 116px; top: 50%; left: 50%; margin-top: -58px; margin-left: -58px; cursor: move; z-index: 1050; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .gallery .drag-icon { background-image: url("../cssImages/icons-sprite@2x.png"); -webkit-background-size: 116px 700px; -moz-background-size: 116px 700px; -o-background-size: 116px 700px; background-size: 116px 700px; } } .gallery-nav { position: relative; right: 0; float: right; top: inherit; text-align: center; width: 50%; z-index: 1; padding: 40px 0; background-color: #f5f5f5; } .gallery-nav a { text-transform: uppercase; font-size: 12px; font-size: 0.75rem; line-height: 125%; -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; position: relative; color: #a6a6a6; display: inline-block; text-align: center; margin-right: 10px; padding: 10px 16px; height: 32px; } .gallery-nav a.on { background-color: #ffffff; } .gallery-nav a.on:after { content: ""; position: absolute; background-image: url("../cssImages/icons-sprite.png"); background-position: center bottom; background-repeat: no-repeat; background-attachment: scroll; display: inline-block; top: -10px; left: 50%; width: 20px; height: 12px; margin-left: -10px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .gallery-nav a.on:after { background-image: url("../cssImages/icons-sprite@2x.png"); -webkit-background-size: 116px 700px; -moz-background-size: 116px 700px; -o-background-size: 116px 700px; background-size: 116px 700px; } } .gallery-nav a:hover, .gallery-nav a:focus, .gallery-nav a:active { color: #000000; text-decoration: none; } /** Flexslider BG Color **/ .g80 .flexslider { padding-left: 50px; } /** UPDATE TABLE **/ .updates-table { width: 100%; max-width: 575px; margin: 0 auto; padding: 15px; } .table-row { width: 100%; float: left; border-top: 1px solid #ebebeb; margin: 0; padding: 10px 0; } .table-row.last { border-bottom: 1px solid #ebebeb; } .table-row div { margin: 0; padding: 0 13px 0 0; text-align: left; } .table-row div p { font-size: 17px; font-size: 1.0625rem; line-height: 125%; margin: 0; } .table-row div p a { color: #1a6b82; } .table-row div p a:hover { text-decoration: underline; } .update-period { width: 70%; float: left; } .download-files { width: 30%; float: left; } .download-files span { margin-left: 20px; width: 55px; display: inline-block; } .table-row div.download-files { text-align: right; color: #686868; } /* FOOTER */ #map-wrapper { background-color: #1a6b82; float: left; position: relative; width: 100%; height: 538px; overflow: hidden; } #map-wrapper .drag-icon { background-image: url("../cssImages/icons-sprite.png"); background-position: center -249px; background-repeat: no-repeat; background-attachment: scroll; display: inline-block; position: absolute; width: 116px; height: 116px; top: 50%; left: 50%; margin-top: -58px; margin-left: -58px; cursor: move; z-index: 1050; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #map-wrapper .drag-icon { background-image: url("../cssImages/icons-sprite@2x.png"); -webkit-background-size: 116px 700px; -moz-background-size: 116px 700px; -o-background-size: 116px 700px; background-size: 116px 700px; } } #map-wrapper img { height: auto; width: 100%; min-width: 1644px; left: 50%; top: 50%; margin-top: -450px; margin-left: -822px; cursor: move; position: absolute; } /************************************************************ ********************* LOGIN PAGE ************************** *************************************************************/ html.login-template { background-color: #1a6b82; } #main.login { background-color: #1a6b82; text-align: center; height: 100%; min-height: 100%; padding-top: 200px; } #main.login #registration { width: 300px; } #main.login #registration h3 { margin-top: 30px; color: #ffffff; } #main.login #registration img { width: auto; } #main.login #registration input.btn[type="submit"], #main.login #registration button[type="submit"] { background-color: #228ead; color: #ffffff; } #main.login #registration input.btn[type="submit"]:hover, #main.login #registration button[type="submit"]:hover { background-color: #1d829f; } #main.login .message { width: 100%; padding-bottom: 10px; color: #F34273; font-size: 17px; margin-bottom: 14px; } /* The end of map */ footer { background-color: #f5f5f5; position: relative; width: 100%; float: left; padding: 16px 20px; /* Developer logo */ /* Caramel Footer */ } .agent_page footer { position: absolute; bottom: 0; left: 0; } footer p { text-align: right; margin: 0px 30px 0 0; display: inline-block; float: right; } footer p a { font-size: 11px; font-size: 0.6875rem; line-height: 125%; color: #7b7b7b; } footer .developer-logo { display: block; float: left; width: 77px; height: 41px; } footer .developer-logo a { display: block; } footer .developer-logo img { width: 77px; height: 41px; border: none; } footer .developer-logo-two { display: block; float: right; width: 61px; height: 42px; } footer .developer-logo-two a { display: block; } footer .developer-logo-two img { width: 61px; height: 42px; border: none; } footer #caramelWeblinkLogo { position: absolute; overflow: hidden; width: 15px; height: 15px; bottom: 34px; right: 50%; margin-right: -37px; } footer #caramelWeblinkLogo a { position: absolute; top: -18px; left: 0px; } footer #caramelWeblinkLogo img { width: 15px; height: 31px; border: none; } /************************************************************ ******************** FIXES ****************************** *************************************************************/ .ie8 .page-banner { background: #ffffff url("../images/bg-union-tower-hero.jpg") no-repeat scroll center center; -webkit-filter: progid:DXImagetransition.Microsoft.AlphaImageLoader(src='../images/bg-union-tower-hero.jpg', sizingMethod='scale'); filter: progid:DXImagetransition.Microsoft.AlphaImageLoader(src='../images/bg-union-tower-hero.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImagetransition.Microsoft.AlphaImageLoader(src='../images/bg-union-tower-hero.jpg', sizingMethod='scale')"; } /************************************************************ ****************** RETINA DISPLAY ************************ *************************************************************/ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { /* Retina-specific stuff here */ .sbToggle, .sbToggle:hover { background: url(../cssImages/Icons-Sprite@2x.png) no-repeat scroll center -465px; background-size: 28px 1065px; } .sbToggleOpen, .sbToggleOpen:hover { background: url(../cssImages/Icons-Sprite@2x.png) no-repeat scroll center -465px; background-size: 28px 1065px; } } /************************************************************ ****************** MEDIA QUERIS ************************** *************************************************************/ @media only screen and (min-width: 2500px) { section.bgColor_blue .g25 .article { padding: 80px 0; } section.bgColor_blue.padding-left { padding-bottom: 60px; } section#location { padding: 60px 50px 0; } } @media only screen and (min-width: 2150px) { section.bgColor_blue .g25 .article { padding: 80px 0; } } @media only screen and (min-width: 1641px) { #map-wrapper img { min-width: 100%; width: 100%; left: 0; margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { .padding-right { padding-right: 20px; } .padding-left { padding-left: 20px; } p { font-size: 17px; font-size: 1.0625rem; line-height: 125%; } h2:before, h4:before { left: -20px; } h2:after, h4:after { right: -20px; } /* navigation */ nav { padding: 0 0 0 30px; } header nav ul li { margin-right: 25px; } header.animateIt .navbar-logo, .sidr-open header .navbar-logo { left: 30px; } header.animateIt nav, .sidr-open header nav { padding-left: 185px; } /* Layout */ .logo { width: 650px; margin-left: -325px; } .logo .logo_header { background-image: url("../cssImages/union-tower-logo-ipad.png"); width: 650px; height: 95px; } } @media only screen and (min-width: 768px) and (max-width: 1023px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 768px) and (max-width: 1023px) and (-moz-min-device-pixel-ratio: 2), only screen and (min-width: 768px) and (max-width: 1023px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-width: 768px) and (max-width: 1023px) and (min-device-pixel-ratio: 2), only screen and (min-width: 768px) and (max-width: 1023px) and (min-resolution: 192dpi), only screen and (min-width: 768px) and (max-width: 1023px) and (min-resolution: 2dppx) { .logo .logo_header { background-image: url("../cssImages/union-tower-logo-ipad@2x.png"); -webkit-background-size: 650px 93px; -moz-background-size: 650px 93px; -o-background-size: 650px 93px; background-size: 650px 93px; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { section .article { padding: 35px 20px; } section#design .g75 { padding-left: 20px; } section.bgColor_blue.padding-left { padding-bottom: 20px; } section.bgColor_blue .g25 .article { padding: 25px 0; } section#location { padding: 20px 20px 0; } .gallery .gallery-nav { padding: 28px 0; bottom: -89px; } } /* Smartphones (portrait) ----------- */ @media only screen and (max-width: 767px) { /* navigation */ .mobile-hide, #desktopNav { display: none; } h2:before, h4:before { left: -20px; } h2:after, h4:after { right: -20px; } .register-link { display: inline-block; } div#nav-icon { display: inline-block; } .padding-right { padding-right: 15px; } .padding-left { padding-left: 15px; } .logo { width: 300px; margin-left: -150px; } .logo .logo_header { background-image: url("../cssImages/union-tower-logo-mobile.png"); width: 300px; height: 55px; } } @media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 767px) and (-moz-min-device-pixel-ratio: 2), only screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (max-width: 767px) and (min-device-pixel-ratio: 2), only screen and (max-width: 767px) and (min-resolution: 192dpi), only screen and (max-width: 767px) and (min-resolution: 2dppx) { .logo .logo_header { background-image: url("../cssImages/union-tower-logo-mobile@2x.png"); -webkit-background-size: 300px 43px; -moz-background-size: 300px 43px; -o-background-size: 300px 43px; background-size: 300px 43px; } } @media only screen and (max-width: 767px) { .agent_page .logo { margin-top: -35px; } .page-banner { height: 450px; } section .g25, section .g33, section .g75, section .g50, section #registration { width: 100%; max-width: 100%; } section .g25.ipad-g25 { width: 100% !important; } section .g75.ipad-g75 { width: 100% !important; } section .article { padding: 30px 15px; } section .article.text-right { text-align: left !important; padding-left: 0; } section .article.text-right h3 { left: -15px; display: inline-block; } section .article.text-right h3 span { background-color: #FFF; width: 30px; height: 10px; } section#design { margin-top: 0; } section#design .article.g50 { padding: 30px 0px; } section#design .article.g25 p { color: #ffffff; } section#design h3 { position: relative; bottom: inherit; left: -15px; margin: 0 0 29px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } section#design .g75 { padding: 0 15px; } section#location { padding: 40px 15px 0; } section.bgColor_blue .g75 { padding: 0; margin-top: 30px; } section.bgColor_blue .g25 h3 { display: none; } .gallery-nav { width: 100%; float: left; } #googleMap, #map { height: 300px !important; } } /* Smartphones (portrait and landscape) ----------- */ @media only screen and (max-width: 600px) { header.animateIt .navbar-logo, .sidr-open header .navbar-logo { left: 15px; } .mobileMode.agent_page .register-link .icon { display: inline-block; } .page-banner { height: 400px; } .logo { width: 300px; margin-left: -150px; } .logo .logo_header { background-image: url("../cssImages/union-tower-logo-mobile.png"); width: 300px; height: 55px; } } @media only screen and (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 600px) and (-moz-min-device-pixel-ratio: 2), only screen and (max-width: 600px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (max-width: 600px) and (min-device-pixel-ratio: 2), only screen and (max-width: 600px) and (min-resolution: 192dpi), only screen and (max-width: 600px) and (min-resolution: 2dppx) { .logo .logo_header { background-image: url("../cssImages/union-tower-logo-mobile@2x.png"); -webkit-background-size: 300px 43px; -moz-background-size: 300px 43px; -o-background-size: 300px 43px; background-size: 300px 43px; } } @media only screen and (max-width: 600px) { #main.login { padding-top: 100px; } section .g33, section .g35, section .g65 { width: 100%; } section#location .g35 img { padding-right: 0; } section#design .article.g25 p { color: #000000; } .gallery { height: 350px; } .gallery div#firstFloor img, .gallery div#groundFloor img { height: 350px; } #map-wrapper { height: 350px; } #map-wrapper img { margin-top: -350px; margin-left: -780px; } .gallery-nav { padding: 25px 0; } .gallery-nav a { font-size: 10px; font-size: 0.625rem; line-height: 125%; padding: 10px 12px; margin-right: 5px; } footer { height: 130px; } .touch .agent_page footer { position: relative; } footer p { text-align: left; margin: 20px 50px 0 0; display: inline-block; float: left; clear: both; } footer .developer-logo { left: 20px; } footer #caramelWeblinkLogo { right: 20px; bottom: 30px; margin-right: 0; } footer .page-up-btn { right: 9px; bottom: 16px; } } /* Smartphones (portrait) ----------- */ @media only screen and (max-width: 360px) { /* Styles */ .mobileMode.agent_page .register-link .icon { display: inline-block; width: 25px; margin-left: 15px; } /* footer */ footer { height: 130px; } footer p { text-align: left; margin: 20px 50px 0 0; display: inline-block; float: left; clear: both; } footer .developer-logo { left: 20px; } footer #caramelWeblinkLogo { right: 20px; bottom: 30px; margin-right: 0; } footer .page-up-btn { right: 9px; bottom: 16px; } } /*# sourceMappingURL=custom.css.map */