/* =============================================================== */ /* Import Section ================================================================ */ @import url("http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300|Roboto:400,700,300"); @import url("normalize.css"); @import url("foundation.css"); @import url("animate.css"); @import url("fontello.css"); /* =============================================================== */ /* Overwrite Foundation/Normalize defaults ================================================================ */ body { font-family: 'Roboto', sans-serif; font-weight: 400; } h1, h2, h3, h4, h5, h6 { font-family: 'Roboto Slab', serif; font-weight: 400; } strong { font-weight: 700; } ul, ol, dl { font-family: 'Roboto Slab', serif; margin-left: 2.5rem; } input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { color:transparent; } input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */ input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { color:transparent; } /* FF 19+ */ input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */ .row { max-width: 95%; } .row.full-width { max-width: 90%; width: 100%; } /* min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) { .row { max-width: 80rem; } } /* =============================================================== */ /* Generic Content Styling ================================================================ */ .section-area { padding: 2.5em 0; } .section-title { color: #696969; text-align: center; margin: 0 0 25px 0; } .section-title:after { content: ''; display: block; height: 5px; width: 100px; margin: 25px auto; background: #B49658; } .section-desc { color: #a9a9a9; text-align: center; font-size: 1.6em; margin-bottom: 50px; } .content-area p, .content-area-white p { font-size: 1.25em; } .content-area-white p { color: #FFFFFF; } .content-image { border: 4px solid #FFFFFF; box-shadow: 8px 6px 0 0 rgba(50, 50, 50, 0.25); margin-bottom: 30px; } .disclaimer { font-size: 0.8em !important; } #section-tomorrowprofit { background: url(../images/section-tomorrowprofit.jpg); background-size: cover; text-align: center; } #section-tomorrowprofit h2 { color: #E9E1CF; text-align: center; margin: 0; padding: 0; } #section-tomorrowprofit img { border: 3px solid #E9E1CF; } #section-tomorrowprofit a { margin-top: 1em; } #section-retirecomfortable { background: url(../images/section-retirecomfortable.jpg); background-size: cover; text-align: center; } #section-retirecomfortable h2 { font-size: 1.3em; color: #E9E1CF; text-align: center; margin: 0.4em 0; padding: 0; } #section-retirecomfortable img { border: 3px solid #E9E1CF; } #section-retirecomfortable a { margin-top: 1em; } #section-grandparentfishing { background: url(../images/section-grandparentfishing.jpg); background-size: cover; text-align: center; } #section-grandparentfishing h2 { color: #E9E1CF; text-align: center; margin: 0; padding: 0; } #section-grandparentfishing img { border: 3px solid #E9E1CF; } #section-grandparentfishing a { margin-top: 1em; } #section-residentialwealth { background: url(../images/section-residentialwealth.jpg); background-size: cover; text-align: center; } #section-residentialwealth h2 { text-align: center; margin: 0.8em 0 10px; padding: 0; font-size: 2em; } #section-residentialwealth img { border: 3px solid #E9E1CF; } #section-residentialwealth a { color: #222222; text-decoration: underline; } #section-residentialwealth a:hover { color: #222222; text-decoration: none; } /* min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) { #section-tomorrowprofit h2 { font-size: 2.2em; } #section-retirecomfortable h2 { font-size: 2.1em; } #section-grandparentfishing h2 { font-size: 1.9em; } } /* =============================================================== */ /* Header ================================================================ */ #logo { margin: 20px 0 0 0; } #contact_details { text-align: center; margin: 20px 0; } #contact_details .phone a { font-size: 1.6em; font-weight: 700; color: #231F20; -webkit-transition: all 0.25s linear 0s; -moz-transition: all 0.25s linear 0s; -o-transition: all 0.25s linear 0s; transition: all 0.25s linear 0s; font-family: 'Roboto Slab', serif; } #contact_details .phone a:hover { color: #B49658; } #contact_details .sm { margin-top: 5px; } #contact_details .sm ul { list-style-type: none; text-align: center; margin: 0; padding: 0; } #contact_details .sm li { display: inline-block; margin: 0 0.3em; } #contact_details .sm li:nth-of-type(1) { background: #4e69a2; } /* facebook */ #contact_details .sm li:nth-of-type(2) { background: #55acee; } /* twitter */ /* #contact_details .sm li:nth-of-type(3) { background: #0077B5; } */ /* linkedin */ #contact_details .sm li:nth-of-type(3) { background: #cc181e; margin-right: 0; } /* youtube */ #contact_details .sm a { display: inline-block; font-size: 1.4em; padding: 0 0.2em; color: #FFFFFF; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-property: transform; transition-property: transform; } #contact_details .sm a:hover { -webkit-transform: scale(1.2); transform: scale(1.2); } /* min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) { #logo { margin: 20px 0; } #contact_details { text-align: right; } #contact_details .sm ul { text-align: right; } } /* =============================================================== */ /* Fixed/Sticky Navigation ================================================================ */ #fixed-nav [data-magellan-expedition], #fixed-nav [data-magellan-expedition-clone] { background: #414042; padding: 1.2em 0; } #fixed-nav img { margin: 10px 0; height: 50px; } #fixed-nav ul { list-style-type: none; text-align: center; } #fixed-nav li { float: none; display: inline-block; } #fixed-nav .sub-nav li.active a { background: #B49658; } #fixed-nav .sub-nav li.active a:hover { background: #957c49; } /* =============================================================== */ /* Video Intro ================================================================ */ #video-intro { padding: 40px 0 20px 0; background-image: url(../images/background-videointro.jpg); background-size: cover; background-position: 50% 50%; } #video-intro .flex-video { padding-bottom: 58%; } #video-intro h2 { color: #FFFFFF; font-weight: 700; } #video-intro p { color: #FFFFFF; font-size: 1.3em; font-weight: 300; font-family: 'Roboto Slab', serif; margin-bottom: 0.5em; } #video-intro .button { background: #94c93d; } #video-intro .button:hover { background: #5b7d23; } /* min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) { #video-intro .flex-video { max-width: 97%; } } /* =============================================================== */ /* Land Development Process ================================================================ */ /* on medium screens and above, the tabbed interface is hidden. on mobiles, the slider is hidden */ #land-development-process { background: #f4f4f4; } /*** Tabs ***/ #land-development-tabs .tabs.vertical { margin-bottom: 0 !important; } #land-development-tabs .tab-title { } #land-development-tabs .tab-title a { font-size: 0; text-align: center; text-transform: uppercase; color: #414042; float: left; padding: 0.4rem; background: #e9e1cf; /* Old browsers */ background: -moz-linear-gradient(top, #e9e1cf 0%, #9b978a 89%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9e1cf), color-stop(89%,#9b978a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #e9e1cf 0%,#9b978a 89%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #e9e1cf 0%,#9b978a 89%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #e9e1cf 0%,#9b978a 89%); /* IE10+ */ background: linear-gradient(to bottom, #e9e1cf 0%,#9b978a 89%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e1cf', endColorstr='#9b978a',GradientType=0 ); /* IE6-9 */ } #land-development-tabs .tab-title a:hover { color: #e9e1cf; background: #8d8c8f; /* Old browsers */ background: -moz-linear-gradient(top, #8d8c8f 0%, #5a595b 89%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8d8c8f), color-stop(89%,#5a595b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #8d8c8f 0%,#5a595b 89%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #8d8c8f 0%,#5a595b 89%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #8d8c8f 0%,#5a595b 89%); /* IE10+ */ background: linear-gradient(to bottom, #8d8c8f 0%,#5a595b 89%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8d8c8f', endColorstr='#5a595b',GradientType=0 ); /* IE6-9 */ } #land-development-tabs .tab-title.active a { color: #e9e1cf; background: #414042; } #land-development-tabs .tab-title .number { display: inline-block; font-size: 20px; font-weight: 700; padding: 0 0.3em; margin-bottom: 10px; background: #8d8c8f; color: #e9e1cf; } #land-development-tabs .tab-title:hover .number { background: #414042; } #land-development-tabs .tab-title.active:hover .number { background: #8d8c8f; } /*** Content ***/ #land-development-tabs .tabs-content { background: #414042; padding: 1.2em; } #land-development-tabs .tabs-content h2, #land-development-tabs .tabs-content p { color: #e9e1cf; text-align: center; } #land-development-tabs .tabs-content h2 { font-size: 1.3em; } #land-development-tabs .tabs-content p { font-weight: 300; } .land-dev-process-orbit { display: none; background-image: url(../images/land-development-process_2-bg.jpg); background-size: cover; } .orbit-container .orbit-slides-container > * .orbit-caption { font-size: 1rem; } .orbit-slide-number, .orbit-timer { display: none; } /* max-width 320px, xsmall screens */ @media only screen and (max-width: 20em) { #land-development-tabs .tab-title a { padding: 0.15rem; } } /* min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) { #land-development-tabs { display: none } .land-dev-process-orbit { display: block; } #land-development-process .row { max-width: 70rem; } /* #land-development-tabs .tabs.vertical { max-width: 30%; width: 30%; } #land-development-tabs .tab-title a { padding: 1rem; font-size: 1.2em; float: none; text-align: left; } #land-development-tabs .tabs-content { width: 70%; float: left; } #land-development-tabs .tabs-content h2 { font-size: 2em; } #land-development-tabs .tabs-content p { font-size: 1.5em; } */ } /* =============================================================== */ /* Land Options ================================================================ */ #land-options { background-image: url(../images/background-landoption.jpg); background-size: cover; background-position: 50% 50%; } #land-options .button { background: #94c93d; } #land-options .button:hover { background: #5b7d23; } #land-options img { margin-bottom: 40px; } #land-options-info p, #land-options-info li { font-size: 1.25em; font-family: 'Roboto Slab', serif; } #mark-twain-quote { margin-top: 2em; } #mark-twain-quote h2 { text-align: center; } #mark-twain-quote p { text-align: center; font-size: 1.1em; font-family: 'Roboto Slab', serif; font-weight: 700; } /* min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) { #mark-twain-quote { margin-top: 0; } } /* =============================================================== */ /* How and Why ================================================================ */ #how-and-why { background: #f4f4f4; } #how-and-why h4 { font-size: 1.8em; margin-top: 1em; color: #B49658; } #how-and-why p { font-family: "Roboto Slab",serif; font-size: 1.25em; } #how-and-why ol, #how-and-why ul, #how-and-why dl { font-size: 1.25em; } #how-and-why img { margin: 40px 0; } /* =============================================================== */ /* About Us ================================================================ */ #about-savill-knight h4 { font-size: 1.8em; margin-top: 1em; color: #B49658; } #about-savill-knight p { font-family: "Roboto Slab",serif; font-size: 1.25em; } /* =============================================================== */ /* Contact Us ================================================================ */ #contact-us { } #contact-us h4 { font-size: 1.8em; margin-top: 1em; color: #B49658; } #contact-us p { font-family: "Roboto Slab",serif; font-size: 1.25em; } #contact-us ul { font-size: 1.25em; list-style-type: none; margin-left: 0; } #contact-us li { margin: 0 0 0.8em 0; } #contact-us li, #contact-us a { color: #414042; } #contact-us li i { color: #696986; } #contact-us a:hover { color: #B49658; } #contact-form { padding: 25px 0; } #contact-form label { color: #414042; } #contact-form input:not(.button), #contact-form textarea { color: rgba(105,105,105,0.7); border-color: rgba(65,64,66,0.25); -webkit-transition: border-color 0.5s linear 0s, background 0.5s linear 0s; -moz-transition: border-color 0.5s linear 0s, background 0.5s linear 0s; -o-transition: border-color 0.5s linear 0s, background 0.5s linear 0s; transition: border-color 0.5s linear 0s, background 0.5s linear 0s; box-shadow: none; } #contact-form input:focus:not(.button), #contact-form textarea:focus { border-color: rgba(19,134,169,0.5); color: rgba(105,105,105,1); } #commentForm textarea { min-height: 120px; } #commentForm { margin-top: 40px; } .t2 { display: none; } /* form spam check - do not remove */ /* =============================================================== */ /* Footer ================================================================ */ footer { background: #414042; } footer p, footer a { color: #FFFFFF; } footer a:hover { color: #FFFFFF; text-decoration: underline; } /* Define mobile styles */ @media only screen { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */ @media only screen and (max-width: 40em) { } /* min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) { } /* min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) { } /* min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) { } /* min-width 1921px, xxlarge screens */ @media only screen and (min-width: 120.063em) { }