397 lines
8.9 KiB
CSS
397 lines
8.9 KiB
CSS
|
|
/* Default font and colours */
|
|
h1, h2, h3 { color: #fff}
|
|
p, li { color: #fff }
|
|
.bg-light-slate { background-color: #515e7b }
|
|
.bg-pastel-grey { background-color: #edf5f1 }
|
|
|
|
|
|
/* ==== CONTAINER FOR SINGLE COLUMN OF CONTENT ==== */
|
|
|
|
/* Desktop */
|
|
@media all and (min-width:768px) {
|
|
.container-one-column { padding: 4% 20% 5% 20% }
|
|
}
|
|
|
|
/* Mobiles */
|
|
@media all and (max-width:767px) {
|
|
.container-one-column {
|
|
padding: 7% 7% 10% 7%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.container-one-column h1 {
|
|
line-height: 1.2; margin-bottom: 32px;
|
|
font-size: calc(38px + (54 - 38) * ((100vw - 320px)/(1600 - 320)));
|
|
}
|
|
|
|
.container-one-column h2 {
|
|
line-height: 1.3; margin-top:32px; margin-bottom: 12px;
|
|
font-size: calc(32px + (48 - 32) * ((100vw - 320px)/(1600 - 320)));
|
|
}
|
|
|
|
.container-one-column h3 {
|
|
line-height: 1.4; margin-top:28px; margin-bottom: 2px;
|
|
font-size: calc(22px + (32 - 22) * ((100vw - 320px)/(1600 - 320)));
|
|
}
|
|
|
|
.container-one-column p,
|
|
.container-one-column li {
|
|
line-height: 1.5; margin-bottom:14px;
|
|
font-size: calc(16px + (18 - 16) * ((100vw - 320px)/(1600 - 320)));
|
|
}
|
|
|
|
.container-one-column ul { margin-left: 17px }
|
|
|
|
|
|
/* ============== FAUX BUTTONS =================== */
|
|
|
|
a.button:link, a.button:visited, a.button:hover, a.button:active {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
padding: 14px 28px;
|
|
display: inline-block;
|
|
line-height: 1;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
a.button-solid:link, .button-solid:visited {
|
|
border-color:#34cdf1;
|
|
color: #000;
|
|
background-color: #34cdf1;
|
|
}
|
|
|
|
a.button-solid:hover, .button-solid:active {
|
|
border-color:#183153;
|
|
background-color: #183153;
|
|
color: #fff
|
|
}
|
|
|
|
a.button-ghost:link, a.button-ghost:visited {
|
|
border-color: #403d50;
|
|
background-color: transparent;
|
|
color: #403d50
|
|
}
|
|
|
|
a.button-ghost:hover, .button-ghost:active {
|
|
border-color: #403d50;
|
|
background-color: #403d50;
|
|
color: #fff
|
|
}
|
|
|
|
a.button-soft { border-radius: 5px }
|
|
a.button-round { border-radius: 25px }
|
|
|
|
/* Hide button icons on narrow desktop sceens */
|
|
@media all and (min-width:768px) and (max-width: 1024px) {
|
|
.container-flexbox .item-3 a.button i { display: none}
|
|
}
|
|
|
|
|
|
/* ============== FANCY HYPERLINKS =================== */
|
|
|
|
a.fancy-link:link, a.fancy-link:visited,
|
|
a.fancy-link:hover, a.fancy-link:active {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
a.fancy-link:link, a.fancy-link:visited {
|
|
color: #34cdf1;
|
|
border-bottom-color:#34cdf1
|
|
}
|
|
|
|
a.fancy-link:hover, a.fancy-link:active {
|
|
color: #fff;
|
|
border-bottom-color: #fff
|
|
}
|
|
|
|
/* Buttons: corner styles */
|
|
.btn-soft { border-radius: 5px }
|
|
.btn-rounded { border-radius: 30px }
|
|
|
|
/* Buttons: Font Awesome icons */
|
|
.btn i { margin-right: 10px; }
|
|
|
|
|
|
/* ============== FLEXBOX MULTI-COLUMN LAYOUTS ================== */
|
|
|
|
|
|
/* ============ PARENT FLEXBOX CONTAINERS ========== */
|
|
|
|
.container-flexbox {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Desktops only - inside padding */
|
|
@media all and (min-width:768px) {
|
|
.container-flexbox { padding: 2% 10% 1% 10% }
|
|
}
|
|
|
|
/* Mobiles only - inside padding */
|
|
@media all and (max-width:767px) {
|
|
.container-flexbox { padding: 7% 8% 1% 8% }
|
|
}
|
|
|
|
/* ====== INNER FLEXBOX COLUMN: 1 COLUMN EVERY SCREEN ======= */
|
|
|
|
.container-flexbox .item-1 {
|
|
width: 100%;
|
|
padding: 1% 6% 0 6%;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ====== FLEXBOX ITEM COLUMNS: 2 COLUMNS ON DESKTOPS, 1 COLUMN ON MOBILES ====== */
|
|
|
|
/* Desktops - 2 columns */
|
|
@media all and (min-width:768px) {
|
|
.container-flexbox .item-2 {
|
|
width: 45%;
|
|
padding: 3% 0 4% 0;
|
|
}
|
|
}
|
|
|
|
/* Mobiles - 1 column */
|
|
@media all and (max-width:767px) {
|
|
.container-flexbox .item-2 {
|
|
text-align: center;
|
|
width: 100%;
|
|
padding: 5% 5% 5% 5%;
|
|
}
|
|
}
|
|
|
|
.container-flexbox .item-2 h2 {
|
|
font-size: calc(24px + (48 - 16) * ((100vw - 320px) / (1600 - 320)));
|
|
}
|
|
|
|
.container-flexbox .item-2 p {
|
|
font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320)));
|
|
}
|
|
|
|
/* =======INNER FLEXBOX COLUMNS: 3 COLUMNS ON DESKTOPS, 1 COLUMN ON MOBILES ===== */
|
|
|
|
|
|
/* Desktops - 3 columns */
|
|
@media all and (min-width:768px) {
|
|
.container-flexbox .item-3 { width: 30% }
|
|
.container-flexbox .item-3 { margin-bottom: 6% }
|
|
}
|
|
|
|
/* Mobiles - 1 column */
|
|
@media all and (max-width:767px) {
|
|
.container-flexbox .item-3 { width: 100% }
|
|
.container-flexbox .item-3 { margin-bottom: 14% }
|
|
}
|
|
|
|
|
|
/* Spacing under images in children of parent flexbox containers */
|
|
.container-flexbox img { margin-bottom: 20px }
|
|
|
|
/* Drop shadow effect around images */
|
|
img.image-shadow {
|
|
box-shadow: 8px 10px 8px #888;
|
|
margin-bottom: 20px
|
|
}
|
|
|
|
/* Makes square images circles */
|
|
img.image-circle {
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.container-flexbox .item-1 h2 {
|
|
color: #34cdf1;
|
|
line-height: 1.2; margin-bottom: 20px;
|
|
letter-spacing:-1px;
|
|
font-weight: 600;
|
|
font-size: calc(24px + (48 - 24) * ((100vw - 320px)/(1600 - 320)));
|
|
}
|
|
|
|
.container-flexbox .item-1 p {
|
|
line-height: 1.7;
|
|
font-size: calc(18px + (26 - 18) * ((100vw - 320px)/(1600 - 320)));
|
|
color: #fff;
|
|
}
|
|
|
|
@media all and (max-width:767px) {
|
|
.container-flexbox .item-1 { text-align: center }
|
|
}
|
|
|
|
.container-flexbox .item-1,
|
|
.container-flexbox .item-2 p,
|
|
.container-flexbox .item-3 p {
|
|
line-height: 1.5; margin-bottom: 40px;
|
|
font-size: calc(16px + (18 - 16) * ((100vw - 320px)/(1600 - 320)));
|
|
color: #fff;
|
|
}
|
|
|
|
.container-flexbox .item-2 h3,
|
|
.container-flexbox .item-3 h3 {
|
|
line-height: 1.2; margin-bottom: 12px;
|
|
color:#34cdf1
|
|
}
|
|
|
|
/* Centre-align text within two, three and four columns on mobiles */
|
|
@media all and (max-width:767px) {
|
|
.container-flexbox .item-2,
|
|
.container-flexbox .item-3 { text-align: center }
|
|
.container-flexbox .item-3 img {
|
|
width: 90%;
|
|
max-width: 390px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
.container-flexbox .item-3 h3,
|
|
.container-flexbox .item-3-2 h3 {
|
|
font-size: calc(20px + (26 - 20) * ((100vw - 320px)/(1600 - 320)));
|
|
margin-bottom:12px;
|
|
margin-top: 32px;
|
|
line-height: 1.6;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.container-flexbox .item-3 img {
|
|
margin-top: 12px
|
|
}
|
|
|
|
|
|
/* =============== BEGIN CONTACT FORM CSS ============= */
|
|
|
|
/* == Contact form container == */
|
|
|
|
/* All screens */
|
|
.container-contact-form {
|
|
text-align: center;
|
|
background-color: #183153
|
|
}
|
|
|
|
/* Desktop */
|
|
@media all and (min-width:1024px) {
|
|
.container-contact-form {
|
|
margin: 4% 23% 4% 23%;
|
|
padding: 2% 4% 1% 4%
|
|
}
|
|
}
|
|
|
|
/* Mobiles */
|
|
@media all and (max-width:1023px) {
|
|
.container-contact-form {
|
|
margin: 6% 8% 18% 8%;
|
|
padding: 7% 8% 8% 8%;
|
|
}
|
|
}
|
|
|
|
/* == Contact form heading and text == */
|
|
|
|
/* Heading */
|
|
.container-contact-form h3 {
|
|
font-weight: bold;
|
|
color: #fff;
|
|
line-height: 1.2;
|
|
margin-bottom: 3%;
|
|
font-size: calc(30px + (64 - 30) * ((100vw - 320px) / (1600 - 320)));
|
|
}
|
|
|
|
/* Text */
|
|
.container-contact-form p {
|
|
font-weight: normal;
|
|
color: #fff;
|
|
line-height: 1.5;
|
|
margin-bottom: 7%;
|
|
font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320)));
|
|
}
|
|
|
|
/* == Contact form fields == */
|
|
|
|
#contact-form .flex-row { display: flex; justify-content: space-between }
|
|
|
|
/* Desktop */
|
|
@media all and (min-width: 1024px) {
|
|
#contact-form .flex-row { flex-direction: row; text-align: left; margin-bottom: 6% }
|
|
#contact-form .flex-row .item-name,
|
|
#contact-form .flex-row .item-email { width: 47% }
|
|
#contact-form .flex-row .item-textarea { width: 64% }
|
|
#contact-form .flex-row .item-btn { width: 30%; align-self: flex-end }
|
|
}
|
|
|
|
/* Mobiles */
|
|
@media all and (max-width: 1023px) {
|
|
#contact-form .flex-row { flex-direction: column; text-align: center; }
|
|
}
|
|
|
|
#contact-form label, #contact-form input, #contact-form textarea {
|
|
font-family: 'Poppins', sans-serif;
|
|
color: #fff;
|
|
display: block;
|
|
}
|
|
|
|
#contact-form label {
|
|
font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
|
|
font-weight: bold;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
|
|
#contact-form [type="text"],
|
|
#contact-form [type="email"],
|
|
#contact-form textarea { width: 100% }
|
|
#contact-form ::placeholder { font-size: 94% }
|
|
|
|
/* Mobiles */
|
|
@media all and (max-width: 1023px) {
|
|
#contact-form [type="text"],
|
|
#contact-form [type="email"],
|
|
#contact-form textarea { margin-bottom: 20px }
|
|
}
|
|
|
|
#contact-form input, #contact-form textarea {
|
|
padding: 10px 12px;
|
|
border: 2px solid rgb(49,145,131);
|
|
background-color: #f0f0f0;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
#contact-form input:focus,
|
|
#contact-form textarea:focus {
|
|
background-color: #fff;
|
|
}
|
|
|
|
#contact-form.flex-row .item-btn { width: 26% }
|
|
|
|
#contact-form #btn-submit {
|
|
float: right;
|
|
border: none;
|
|
color: #000;
|
|
font-weight: bold;
|
|
padding: 18px 28px;
|
|
font-size: 18px;
|
|
border-color:#34cdf1;
|
|
color: #000;
|
|
background-color: #34cdf1;
|
|
}
|
|
|
|
|
|
#contact-form #btn-submit:hover,
|
|
#contact-form #btn-submit:active {
|
|
background-color: red;
|
|
color: #fff
|
|
}
|
|
|
|
#contact-form #btn-submit i.fas {
|
|
margin-left: 9px;
|
|
font-size: 104%
|
|
}
|
|
|