/* 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%
}