body {
font-family: Raleway, "Helvetica Neue", Helvetica, Arial, "sans-serif";
color: #000;
font-weight: 400;
font-size: 1.125rem;
line-height: 1.8rem;
}
p {
margin-bottom: 0.9375rem;
}
blockquote {
background: #F1F1F1;
border-left: 0.25rem #DDD solid;
padding: 1.875rem;
padding-left: 5.75rem;
position: relative;
}
blockquote p:last-child {
margin-bottom: 0;
}
blockquote::before {
display: block;
position: absolute;
top: 1.875rem;
left: 1.875rem;
content:url(//cliffordwallace.com.au/wp-content/themes/cliffordwallace/images/quote-icon.svg);
}
hr {
border-top: 1px solid #DDD;
} .light-font {
font-weight: 300 !important;
line-height: 150%;
}
.small-text {
font-size: 0.75rem;
}
.responsive-map {
overflow:hidden;
padding-bottom:78.65%;
position:relative;
height:0;
margin-top: 1.875rem;
}
.responsive-map iframe {
left:0;
top:0;
height:100%;
width: 100%;
position:absolute;
}
.remove-padding {
padding:0;
}
.dark-grey {
color: #666;
}
.mid-grey {
color: #c6c6c6;
}
.img-fluid, .img-fluid img {
max-width: 100%;
height: auto;
} .wrapper {
overflow-x: hidden;
}
.hero-image {
width: 100%;
height: 50vw;
min-height: 250px;
margin-bottom: 1.875rem;
margin-top: 5.0625rem; background-size: cover;
}
.standard-page {
margin-top: 6.9375rem; margin-bottom: 1.875rem;
}
.standard-page-hero {
margin-bottom: 3.75rem;
}
.hero-callout-image {
position: relative;
}
.hero-callout-tagline {
background-color: #000;
width: calc(100vw - 2.8125rem); text-align: right;
padding: 0.9375rem;
position: absolute;
right: 1.875rem;
bottom: -1.5625rem;
}
.hero-callout-tagline h6 {
margin:0;
}
.hero-callout a.link-button {
margin-bottom: 0;
}
.hero-callout-copy {
margin-top: 2.8125rem;
}
.hero-callout-copy p:last-child {
margin-bottom: 0;
}
.hero-callout-right .hero-callout-tagline {
right: 0;
left: 1.875rem;
text-align: left;
}
.standard-block, .images-block, .infographics-block {
margin-bottom: 1.875rem;
}
.hero-callout, .quote-box, .divide-block {
margin-bottom: 3.75rem;
}
.standard-block div p:last-child, .hero-callout div p:last-child, .images-block div p:last-child, .infographics-block div p:last-child, .quote-box div p:last-child, .service-roles div p:last-child {
margin-bottom: 0;
}
.standard-block div, .images-block div {
margin-bottom: 1.875rem;
}
.no-margin-bottom div {
margin-bottom: 0rem !important;
}
.hero-callout-tagline {
margin-bottom: 0 !important;
}
.service-roles, .highlighted-image-box {
margin-bottom: 3.75rem;
}
.infographic-section {
margin-bottom: 1.875rem;
}
.highlighted-image-box {
background: #222;
}
.highlighted-image-box-copy {
padding: 1.875rem 3.75rem !important;
}
.highlighted-image-box-image {
position: relative;
}
.highlighted-image-box-image img {
display: block;
}
.highlighted-image-box-arrow {
position: absolute;
bottom: 0;
right:50%;
transform: translateX(50%);
width: 0; 
height: 0; 
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid #222;
}
.highlighted-image-box-copy p:last-child {
margin-bottom: 0;
}
.infographic-section-mini {
margin-bottom: 0.9375rem;
}
.infographic-section-mini .infographic-circle {
height: 3.125rem;
width: 3.125rem;
line-height: 3.125rem;
font-size: 1.5625rem;
}
.infographic-section-mini .infographic-text {
float:left;
height: 3.125rem;
text-align: left;
} header {
background-color: #fcfcfc;
border-bottom: 0.0625rem solid #ddd;
position: fixed;
width: 100%;
z-index: 100;
}
header .header-wrapper {
position: relative;
height: 80px;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 145px);
}
.logo img {
display: block;
width: 100% !important;
height: auto;
max-height: 40px;
}
.navbar {
background-color:#f1f1f1;
padding: 0;
}
.navbar-toggler {
width: 1.625rem;
text-align: center;
}
.nav-link {
padding:0px;
}
.navbar-nav .nav-link {
color:#000;
text-transform: uppercase;
font-size: 1rem;
text-align: center;
font-weight: 700;
padding-left: 0.9375rem !important;
padding-right: 0.9375rem !important;
line-height: 2.5rem;
text-decoration: none;
}
.navbar-nav .nav-link:focus, .navbar-nav .nav-link:hover {
background-color: #DDD;
}
.dropdown-menu {
display:block;
margin:0 0.9375rem;
border-radius: 10px;
border:0;
background-color:#DDD;
font-size: 0.875rem;
}
.dropdown-item {
font-size: 1rem;
text-align: center;
color:#000;
font-weight: 700;
text-decoration: none;
}
.dropdown-item:focus, .dropdown-item:hover {
color:#000;
background-color:#EEE;
}
.dropdown-toggle::after {
display: none;
}
.navbar-toggler {
padding: 0;
font-size: 1.875rem;
line-height: 1.875rem;
border: 0;
position: absolute;
top: 1.5rem;
right: 0.9375rem;
}
.navbar-toggler-icon {
font-size: 1.875rem;
width: auto;
height: auto;
color: #000 !important;
}
.navbar-collapse {
max-height: calc(100vh - 81px);
overflow-y: auto;
}
.dropdown-menu::before {
content: '';
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #DDD;
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
}
.dropdown:hover>.dropdown-menu {
display: block;
} h1, h2, h3, h4, h5, h6 {
font-weight: 700;
margin-bottom: 0.625rem;
}
h4, h5, h6 {
margin-bottom: 0.3125rem;
}
h1 {
font-size: 2.625rem;
line-height: 3.0625rem;
}
h2 {
font-size: 2.25rem;
line-height: 2.5rem;
}
h3 {
font-size: 1.875rem;
line-height: 2.125rem;
}
h4 {
font-size: 1.625rem;
line-height: 1.75rem;
}
h5 {
font-size: 1.375rem;
line-height: 1.5rem;
}
h6 {
font-size: 1.125rem;
line-height: 1.375rem;
}
p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 {
margin-top: 1.875rem;
}
ul + h1, ul + h2, ul + h3, ul + h4, ul + h5, ul + h6 {
margin-top: 1.875rem;
}
.content p:last-child {
margin-bottom: 0;
} a {
color: #000;
text-decoration: underline;
}
a:visited {
color: #000;
text-decoration: underline;
}
a:hover {
color: #666;
text-decoration: underline;
}
a.link-button {
min-width: 6.25rem;
padding: 0.625rem 0.9375rem;
margin-bottom: 0; border-radius: 10px;
text-transform: uppercase;
line-height: 1rem;
font-weight: 700;
text-align: center;
text-decoration: none;
display: inline-block;
transform: translateY(1);
-webkit-transition: transform 200ms ease-in-out, background 200ms ease-in-out;
transition: transform 200ms ease-in-out, background 200ms ease-in-out;
will-change: transform, background;
}
a:hover.link-button {
transform: translateY(-0.1875rem);
-webkit-transition: transform 200ms ease-in-out, background 200ms ease-in-out;
transition: transform 200ms ease-in-out, background 200ms ease-in-out;
will-change: transform, background;
}
a:active.link-button {
transform: translateY(-0.125rem);
-webkit-transition: transform 200ms ease-in-out, background 200ms ease-in-out;
transition: transform 200ms ease-in-out, background 200ms ease-in-out;
will-change: transform, background;
}
a.black-button {
color: #FFF;
background: #ffa31a;
}
a:hover.black-button {
background: #ffc266;
}
a.dark-grey-button {
color: #FFF;
background: #ffa31a;
}
a:hover.dark-grey-button {
background: #ffc266;
}
a.light-grey-button {
color: #000;
background: #F1F1F1;
}
a:hover.light-grey-button {
background: #DDD;
}
a.white-button {
color: #000;
background: #FFF;
}
a:hover.white-button {
background: #F1F1F1;
}
.large-button {
font-size: 1.25rem !important;
padding: 0.9375rem 1.25rem !important;
}
.small-button {
font-size: 0.75rem !important;
padding: 0.3125 !important;
} .service-hero-image {
position: relative;
margin-bottom: 7.0625rem;
}
.alternate-hero-image {
position: relative;
margin-bottom:2rem;
}
.service-tagline {
position: absolute;
left:0px;
bottom: 0px;
margin-bottom:-5.1875rem;
}
.service-tagline span {
background-color: #000;
width: 12.5rem;
margin-bottom: 0.3125rem;
padding: 0.625rem;
display: block;
text-align: center;
}
.service-tagline span:last-child, .service-tagline h4 {
margin-bottom: 0;
}
.page-id-13 .tag-one, .page-id-1577 .tag-one {
margin-left: 1.25rem;
}
.page-id-13 .tag-two, .page-id-1577 .tag-two {
margin-left: 3.125rem;
}
.page-id-15 .tag-one {
margin-left: 1.875rem;
}
.page-id-15 .tag-three {
margin-left: 3.125rem;
}
.page-id-17 .tag-one {
margin-left: 1.25rem;
}
.page-id-17 .tag-two {
margin-left: 3.125rem;
}
.service-roles {
background: #222;
color: #FFF;
padding: 3.75rem 0 1.875rem 0;
}
.service-role {
margin-bottom: 1.875rem;
text-align: center;
}
.service-role img {
border-radius: 100px;
border: 0.125rem solid #FFF;
margin-bottom: 0.625rem;
} .infographic-section i {
transform: scale(1);
-webkit-transition: transform 200ms ease-in-out;
transition: transform 200ms ease-in-out;
will-change: transform;
}
.infographic-section:hover i {
transform: scale(1.1);
-webkit-transition: transform 200ms ease-in-out;
transition: transform 200ms ease-in-out;
will-change: transform;
}
.infographic-circle {
background: #F1F1F1;
width: 5rem;
height: 5rem;
border-radius: 2.5rem;
text-align: center;
line-height: 5rem;
color: #444;
font-size: 2.5rem;
border: 0.0625rem #DDD solid;
margin-right: 0.9375rem;
} .blog hr {
margin-top: 1.875rem;
margin-bottom: 1.875rem;
}
.blog h3 a {
text-decoration: none;
}
.post-date {
color: #666;
font-weight: bold;
display: block;
margin-bottom: 0.625rem;
}
.entry img {
width: 100%;
height: auto;
}
.wp-caption {
max-width: 100%;
width: 100% !important;
}
.wp-caption-text {
color: #666;
font-size: 0.75rem;
text-align: center;
text-transform: uppercase;
font-weight: bold;
}
.featured-image {
margin-bottom: 0.9375rem;
}
.featured-image-hero {
margin-bottom: 1.875rem;
}
.featured-image img, .featured-image-hero img {
width: 100%;
max-width: 100%;
height: auto;
}
.featured-image-no-margin img {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 100%;
}
.job-box {
background-color: #F1F1F1;
border: 0.0625rem solid #DDD;
padding: 1.875rem;
margin-bottom: 1.875rem;
border-radius: 0.625rem;
-webkit-transition: background 200ms ease-in-out;
transition: background 200ms ease-in-out;
will-change: background;
height: calc(100% - 1.875rem);
}
.job-box:hover {
background-color: #DDD;
-webkit-transition: background 200ms ease-in-out;
transition: background 200ms ease-in-out;
will-change: background;
cursor: pointer;
}
a.job-box-link {
text-decoration: none;
}
a:hover.job-box-link {
color:#000;
}
.job-box p {
margin-bottom: 0.625rem;
}
.location {
margin-left: 0.9375rem;
} input, input[type="text"], input[type="email"], input[type="tel"], textarea {
width: 100%;
background: #FCFCFC;
border: 0.0625rem solid #DDD;
border-radius: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0.9375rem;
line-height: 1rem;
}
input:hover, input[type="text"]:hover, input[type="email"]:hover, input[type="tel"]:hover, textarea:hover {
border-color: #666;
}
textarea {
line-height:1.625rem;
}
::-webkit-input-placeholder { color: #666;
transition: opacity 250ms ease-in-out;
line-height: normal;
}
:focus::-webkit-input-placeholder {
opacity: 0.5;
}
:-ms-input-placeholder { color: #666;
transition: opacity 250ms ease-in-out;
line-height: normal;
}
:focus:-ms-input-placeholder {
opacity: 0.5;
}
::-moz-placeholder { color: #666;
opacity: 1;
transition: opacity 250ms ease-in-out;
line-height: normal;
}
:focus::-moz-placeholder {
opacity: 0.5;
}
:-moz-placeholder { color: #666;
opacity: 1;
transition: opacity 250ms ease-in-out;
line-height: normal;
}
:focus:-moz-placeholder {
opacity: 0.5;
}
label {
font-weight: 700;
margin-bottom: 0;
display: block;
}
select {
width:100%;
display: block;
padding: 0.9375rem;
line-height: normal;
box-sizing: border-box;
border: 1px solid #DDD;
border-radius: 0.625rem;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #FCFCFC;
background-image: url(//cliffordwallace.com.au/wp-content/themes/cliffordwallace/images/select-carat.svg);
background-repeat: no-repeat;
background-position: right 0.9375rem top 50%;
}
select::-ms-expand {
display: none;
}
select:hover {
border-color: #666;
}
select:focus {
border-color: #aaa;
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
box-shadow: 0 0 0 3px -moz-mac-focusring;
color: #222;
outline: none;
}
select option {
font-weight:normal;
}
input.dark, input[type="text"].dark, input[type="email"].dark, input[type="tel"].dark, textarea.dark, select.dark {
background-color: #444;
border: 0.0625rem solid #666;
color: #FFF;
}
div.wpcf7-mail-sent-ok {
border: 0 !important;
background: #000 !important;
color: #FFF !important;
padding: 1rem !important;
}
.contact-form input[type="submit"], #searchform input[type="submit"] {
color: #FFF;
background: #000;
width: auto;
border: 0;
min-width: 6.25rem;
padding: 0.625rem 0.9375rem;
margin-bottom: 0;
margin-right: 0.3125rem;
border-radius: 10px;
text-transform: uppercase;
line-height: 1rem;
font-weight: 700;
text-align: center;
text-decoration: none;
display: inline-block;
transform: translateY(1);
-webkit-transition: transform 200ms ease-in-out, background 200ms ease-in-out;
transition: transform 200ms ease-in-out, background 200ms ease-in-out;
will-change: transform, background;
}
.contact-form input[type="submit"]:hover, #searchform input[type="submit"]:hover {
background: #222;
transform: translateY(-0.1875rem);
-webkit-transition: transform 200ms ease-in-out, background 200ms ease-in-out;
transition: transform 200ms ease-in-out, background 200ms ease-in-out;
will-change: transform, background;
}
.contact-form label {
margin-bottom: 0.9375rem;
} footer {
background: #222;
color: #CCC;
padding: 3.75rem 0;
text-align: center;
font-size: 0.75rem;
line-height: 1.125rem;
}
footer > .container > .row > div {
margin-bottom: 1.875rem;
}
footer > .container > .row > div:last-child {
margin-bottom: 0;
}
.footer-nav-col-1 {
text-align: right;
}
.footer-nav-col-2 {
text-align: left;
}
footer ul {
list-style-type: none;
padding: 0;
margin: 0;
}
footer ul > li {
margin-bottom: 0.9375rem;
}
footer ul > li:last-child {
margin-bottom: 0;
}
footer a {
color: #CCC;
text-decoration: none;
}
footer a:visited {
color: #CCC;
text-decoration: none;
}
footer a:hover {
color: #FFF;
text-decoration: underline;
}
.footer-social li {
display: inline-block;
}
.footer-social a {
font-size: 1.7rem;
margin: 0 0.3125rem;
}
.footer-newsletter input {
margin-bottom: 0.625rem;
font-size: 1rem;
}
footer a.light-grey-button {
font-size: 1rem;
line-height: 1rem;
color: #000;
text-decoration: none;
margin:0;
}
footer strong {
text-transform: uppercase;
margin-bottom: 0.3125rem;
display: inline-block;
}
footer hr {
margin:0;
border-top: 1px solid #666;
}
.instagram-header {
padding: 0.625rem;
background: #000;
color: #FFF;
}
.instagram-header a, .instagram-header a:visited {
color: #FFF;
text-decoration: none;
}
.instagram-header a:hover {
color: #CCC;
text-decoration: underline;
}
#AoC {
background-color:#111;
padding: 30px 0;
color: #CCC;
font-size: 0.75rem;
line-height: 1.125rem;
text-align:center;
} #sb_instagram #sbi_images {
padding: 0px !important;
}
::selection {
background: black;
color: white;
}
::-moz-selection {
background: black;
color: white;
}
.grecaptcha-badge{
visibility: collapse !important;
}
.featured-article-block {
margin-bottom: 1.875rem;
}
.page-template-page-about .quote-box {
margin-top: 3.75rem;
margin-bottom: 0;
}
.rsUni {
height: 50vw !important;
max-height: 650px !important;
min-height: 250px !important;
}
.rsUni img {
margin-top: 0 !important;
}
.slide-content {
position: absolute;
bottom:15px;
left: 0;
z-index: 100;
width: 100%;
text-align: center;
}
.slide-title {
text-shadow: 0 0 6px rgba(0,0,0,0.3);
font-weight: 700;
color: #FFF;
font-size: 1.375rem;
line-height: 1.625rem;
}
.slide-arrow {
display: none;
}
.slide-arrow a {
color: #FFF !important;
}
.slide-arrow a:hover {
color: #CCC !important;
cursor: pointer;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translate3d(0, -50%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#home-slider {
margin-top: 81px;
margin-bottom: 3.75rem;
}
.contact-dark-box {
background-color: #222222;
padding: 1.875rem;
margin-top: 1.875rem;
}
.contact-dark-box a:link, .contact-dark-box a:visited {
color: #FFF;
}
.contact-dark-box a:hover {
color: #CCC;
}
.quote-box {
text-align: center;
}
.quote {
font-size: 1.75rem;
font-weight: 300;
line-height: 2.5rem;
margin-bottom: 0.9375rem;
display: inline-block;
padding: 3.75rem 0;
position: relative;
}
.quote:before {
position: absolute;
content: '\201C';
font-family: Raleway;
font-size: 3.75em;
left: 0;
top: 1.875rem;
font-weight: 700;
color: #EEE;
}
.quote:after {
position: absolute;
content: '\201D';
font-family: Raleway;
font-size: 3.75em;
right: 0;
bottom: -1.875rem;
font-weight: 700;
color: #EEE;
}
.quote-box h5 {
margin-bottom: 0.9375rem;
} @media (min-width: 576px) {
.hero-callout-tagline {
width: calc(100vw); }
} @media (min-width: 768px) {
h1 {
font-size: 3.25rem;
line-height: 3.6875rem;
}
h2 {
font-size: 2.75rem;
line-height: 2.9375rem;
}
h3 {
font-size: 2.25rem;
line-height: 2.55rem;
}
h4 {
font-size: 1.875rem;
line-height: 2rem;
}
h5 {
font-size: 1.5rem;
line-height: 1.625rem;
}
h6 {
font-size: 1.25rem;
line-height: 1.5rem;
}
header {
position: relative;
}
header + * {
padding-top: 0;
}
header .header-wrapper {
height: 100px;
}
.logo {
width: auto;
}
.logo img {
width: 456px;
height: 60px;
max-height: 60px;
}
.service-role {
text-align: left;
}
.navbar-toggler {
top: 2.125rem;
}
.navbar-collapse {
max-height: calc(100vh - 100px);
}
footer, .footer-nav-col-1, .footer-nav-col-2 {
text-align: left;
}
footer > .container > .row > div:nth-last-child(2) {
margin-bottom: 0;
}
footer ul > li {
margin-bottom: 0.0625rem;
}
.footer-social a {
margin: 0 0.625rem 0 0;
}
.footer-logo {
text-align: center;
}
.footer-bottom-col-2 {
text-align: right;
}
.footer-divide {
margin-bottom: 0.9375rem !important;
}
.hero-image {
margin-top: 0;
margin-bottom: 3.75rem;
}
.standard-page {
margin-top: 3.75rem;
margin-bottom: 3.75rem;
}
.featured-article-block {
margin-bottom: 3.75rem;
}
.quote {
padding: 0 5.625rem;
font-size: 2rem;
line-height: 2.875rem;
}
#home-slider {
margin-top: 0;
}
.slide-title {
font-size: 3.25rem;
line-height: 3.75rem;
}
} @media (min-width: 992px) {
.hero-image {
height: 45vw;
max-height: 650px;
}
.rsUni { height: calc(100vh - 150px) !important;
max-height: 100vh !important;
}
.slide-arrow {
margin-top: 0.9375rem;
font-size: 1.875rem;
opacity: 0;
animation: fadeIn 0.5s ease-in-out both;
animation-delay: 0.5s;
display: inline-block;
}
.service-hero-image {
margin-bottom: 0;
}
.service-tagline {
left:-2.5rem;
bottom:-2.5rem;
}
.service-tagline {
margin-bottom: 0;
}
header {
border-bottom: 0;
}
.navbar-toggler {
display: none;
}
.dropdown-menu {
border-radius: 0;
margin: 0;
display: none;
}
.navbar-nav .nav-link {
font-size: 0.75rem;
line-height: 3.125rem;
}
.dropdown-item {
font-size: 0.875rem;
text-align: left;
}
.navbar-collapse {
overflow-y:visible;
}
.dropdown-toggle::after {
display: inline-block;
}
.responsive-map {
margin-top: 0;
}
.hero-callout-copy {
margin-top: 0;
}
.hero-callout-tagline {
width: calc(50vw - 2.8125rem); }
.hero-callout {
margin-bottom: 5.3125rem; }
.home .standard-block, .home .images-block, .home .infographics-block {
margin-bottom: 5.625rem; }
.home .quote-box, .home .service-roles, .home .highlighted-image-box {
margin-bottom: 7.5rem; }
.home .hero-callout {
margin-bottom: 9.0625rem; }
.highlighted-image-box-arrow {
position: absolute;
bottom: 50%;
right:0;
transform: translateY(50%);
border-top: 40px solid transparent;
border-bottom: 40px solid transparent; 
border-right:40px solid #222;
border-left: 0;
}
#home-slider {
margin-bottom: 7.5rem;
}
.page-template-page-about .quote-box {
margin-top: 0;
margin-bottom: 0;
}
.dropdown-menu::before {
display:none;
}
} @media (min-width: 1200px) {
.navbar-nav .nav-link {
font-size: 0.875rem;
}
}