.main-navigation li .fa {
color: white; }
body {
font-size: 16px;
}
a {
text-decoration: none;
}
h2 {
font-size: 50px;
}
h3 {
font-size: 2em;
color: #800000;
}
.text-primary {
color: #800000;
}
.spacer-20 {
padding-bottom: 85px;
}
.mt-2 {
margin-top: 2rem;
}
.mt-20px {
margin-top: 20px;
}
.content-padding {
padding: 0 10%;
}
.emphasis {
border-bottom: 5px #404040 solid;
}
.btn > a {
color: #800000; }
#shiftnav-toggle-main.shiftnav-toggle-style-burger_only .shiftnav-toggle-burger {
display: none; }
.custom-logo-link {
margin-top: -30px;
}
.site-header {
background-image: url(https://fpsaonline.co.za/wp-content/uploads/2020/06/home-header.jpg);
width: 100%;
background-size: cover;
height: 95vh;
}
.site-header {
margin-bottom: -10vh;
}
.slanted {
background-color: #fff;
height: 500px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 66%, 0 100%);
position: relative;
width: 100%;
height: 300px;
padding-top: 100px;
align-items: left;
justify-content: left;
z-index: 1;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
line-height: 28px; }
.slanted a {
color: #404040;
}
.slanted a:hover {
color: #800000;
}
.slanted a .fas {
color: #800000;
}
.partner-text {
color: #404040;
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 29px;
text-align: center;
padding-top: 115px;
}
.border-left {
border-left: #800000 solid 10px;
padding-left: 24px;
list-style: none;
}
.border-left p {
line-height: 20px;
}
.box-2 {
height: 430px;
margin-top: -140px;
}
.desc-box {
border-radius: 50px;
width: 80%;
}
.desc-heading {
color: white;
}
.desc-big-heading {
font-size: 35px;
}
.home-img-2 {
width: 83%;
margin-top: -70px;
}
.service-img {
width: 83%; }
.contact-block { }
.contact-block a {
color: white;
}
.contact-block a:hover {
color: grey;
}
.message {
background: #f3f3f3;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
color: #fff;
position: fixed;
z-index: 8888 !important;
right: 60px;
bottom: -764px;
width: 300px;
padding: 20px 20px 50px 20px;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
transition: all 1s ease;
overflow: hidden;
text-align: Center;
box-sizing: border-box;
}
.message h3 {
color: #800000;
text-transform: uppercase;
}
#toggle {
position: fixed;
appearance: none;
cursor: pointer;
bottom: -100%;
display: none;
z-index: 999999 !important;
}
#toggle + label {
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
position: fixed;
cursor: pointer;
padding: 10px;
right: 60px;
bottom: 0;
background: #800000;
border-bottom: 0px;
width: 250px;
font-weight: bold;
padding: 10px;
color: white !important;
line-height: 20px;
text-align: center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
margin: 0px 0px;
transition: all 500ms ease;
z-index: 999999 !important;
border: white solid 1px;
}
#toggle + label:after {
content: "CONTACT US";
}
.container-sticky {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
padding: 10px;
display: none;
}
#toggle:checked ~ .message {
bottom: 0;
right: 60px;
}
#toggle:checked + label {
background: #d9d9d9;
}
#toggle:checked + label:after {
content: "Close";
}
.message .gform_body ul {
margin: 0 !important;
margin-block-start: 0 !important;
padding-inline-start: 0 !important;
}
body #gform_wrapper_1 .gform_heading .gform_title {
display: none; }
.footer-bg {
background-image: url(https://fpsaonline.co.za/wp-content/uploads/2020/06/footer-background-final.jpg);
background-size: cover;
margin-left: 0;
margin-right: 0;
height: 470px;
width: 100%;
margin-top: -100px;
clip-path: polygon(21% 45%, 100% 16%, 100% 100%, 0 100%, 0 4%);
}
.footer-bg .footer-content {
text-align: center;
margin-left: 50%;
padding-top: 3%;
background: white;
width: 32%;
height: 480px;
}
.bg-footer-back {
height: 480px;
clip-path: polygon(21% 41%, 100% 12%, 100% 100%, 0 100%, 0 0%);
background-color: #800000;
width: 100%;
}
.site-footer {
position: relative;
padding: 20px;
font-size: 13px;
}
.abstract-container {
display: none; }
@media (max-width: 600px) { html {
margin-top: 0 !important;
}
p {
line-height: 20px;
}
.d-nav {
display: block;
}
.site-branding {
position: absolute;
top: 0;
left: 0;
}
#shiftnav-toggle-main.shiftnav-toggle-style-burger_only .shiftnav-toggle-burger {
display: block;
}
.main-navigation {
display: none;
}
.site-header {
height: 30vh !important;
margin-top: 20px !important;
}
.custom-logo-link {
margin-left: 45px !important;
}
.custom-logo img {
width: 100% !important;
}
.contact-container {
margin-left: 17px !important;
margin-top: -100px !important;
z-index: 999999 !important;
}
.slanted {
padding-top: 10px;
clip-path: none;
height: auto;
}
.slanted a {
font-size: 13px;
}
.content-area {
padding: 16px 0 16px !important;
}
.content {
padding: 16px !important;
}
.border-left {
padding-left: 16px;
}
.home-img {
display: none;
}
.rotated-text {
display: none;
}
.box-1 {
width: 290px !important;
}
.box-2 {
margin-top: 180px !important;
margin-left: 0 !important;
margin-bottom: 0 !important;
width: 290px !important;
}
.content-padding, .entry-content {
padding: 10px !important;
}
.content-padding h2 {
font-size: 32px !important;
}
.content-padding .span_3_of_6 {
width: 100%;
}
.spacer-20 {
padding-bottom: 20px;
}
.float-left {
margin-left: 30px;
}
.service-img {
width: 100%;
margin-left: 0 !important;
}
.desc-box {
width: 100%;
border-radius: 30px;
margin-top: 0;
margin-right: 0;
border-left: none;
}
.btn {
margin-left: 0;
}
.btn > a {
color: #800000 !important;
}
.red {
margin-left: 10px !important;
}
.home-img-2 {
width: 100%;
margin-top: 0;
}
.drill-btn {
margin-bottom: 20px;
}
.mt-2, .mt-20px, .aos-animate {
font-size: 32px;
}
.text-center {
font-size: 13px !important;
}
.spacer-90 {
padding-bottom: 0px !important;
}
.bg-footer-back {
clip-path: none;
height: auto !important;
}
.footer-bg {
clip-path: none;
height: auto !important;
margin-top: -40px !important;
}
.footer-content {
width: 90% !important;
margin-left: 16px !important;
height: auto !important;
}
.partner-text {
padding-top: 0 !important;
font-size: 20px;
line-height: 22px;
}
.partner-text img {
width: 40% !important;
}
.entry-content .span_3_of_6 {
width: 100%;
}
.message, #toggle:checked ~ .message {
right: 20px;
width: 90%;
}
.message h3 {
margin-bottom: 0px !important;
}
#toggle + label {
width: 58%;
margin: 0 auto;
}
.wpcf7 p {
line-height: 22px !important;
margin: 0 !important;
}
.site-footer {
padding: 20px 20px 50px;
}
}
@media (max-width: 768px) and (min-width: 600px) { #shiftnav-toggle-main.shiftnav-toggle-style-burger_only .shiftnav-toggle-burger {
display: block;
}
.main-navigation {
display: none;
}
.site-header .col {
margin-top: 0 !important;
}
.contact-container {
margin-left: 35% !important;
}
.rotated-text {
display: none;
}
.site-header {
height: 40vh !important;
}
.home-img {
display: none;
}
.box-1 {
width: 700px !important;
height: auto !important;
}
.box-2 {
width: 600px !important;
height: auto !important;
margin-left: 80px !important;
margin-top: 0;
}
.mt-2 {
margin-top: 216px;
}
.content-padding {
padding: 0;
}
.desc-box {
margin-top: -99px;
margin-right: 0;
width: 84%;
}
.spacer-20 {
padding-bottom: 45px;
}
.home-img-2 {
margin-top: 10px;
}
.spacer-90 {
padding-bottom: 20px;
}
.span_3_of_6 {
width: 100%;
}
.content-area, .content {
padding: 40px 20px;
}
}
@media (max-width: 1050px) and (min-width: 768px) { .entry-content p {
font-size: 14px !important;
}
#shiftnav-toggle-main.shiftnav-toggle-style-burger_only .shiftnav-toggle-burger {
display: block;
}
.main-navigation {
display: none;
}
.site-header .col {
margin-top: 0 !important;
}
.contact-container {
margin-left: 35% !important;
}
.rotated-text {
display: none;
}
.site-header {
height: 40vh !important;
}
.box-1 {
margin-top: 10px;
height: auto !important;
width: 580px;
}
.box-2 {
margin-top: 0;
margin-left: 100px;
width: 700px;
height: auto !important;
}
.content-padding {
padding: 0;
margin-top: 50px;
}
.mt-2 {
margin-top: 150px;
}
.spacer-20, .spacer-90 {
padding-bottom: 50px;
}
.home-img-2 {
margin-top: 0;
}
.span_3_of_6 {
width: 49%;
margin-top: 50px;
}
.service-block {
width: 50%;
}
.entry-content {
padding: 40px 20px;
}
}
@media (min-width: 1400px) {
.entry-content p {
font-size: 15px !important;
}
}