/*
date:   07/09/2021
note:   css stylesheet for kezgo's website

colours
blue - 100, 25, 0, 10; #0083c2; PMS Process Blue  //  #0083c2#08cdarkcyanhsl(199,100%,38%)rgb(0,131,194)
aqua - 75, 0, 25, 0; #00bac6; PMS 319  //  #00bac6#0ccdarkturquoisehsl(183,100%,38%)rgb(0,186,198)
grey - 30, 20, 25, 0; #b5bbb7; PMS 421  //  #a4aaa6#abadarkgrayhsl(140,3%,65%)rgb(164,170,166)
silver - #b5bbb7#bcbsilverhsl(140,4%,72%)rgb(181,187,183)

	border: 2px solid red;

*/

@charset "utf-8";
@import url("normalize.css");
@font-face{
	font-family: 'vera-bold';
	src: url('Vera-Bold.ttf');
    font-weight: normal;
    font-style: normal;
	}
@font-face {
    font-family: 'colaborate-thinregular';
    src: url('colabthi-webfont.eot');
    src: url('colabthi-webfont.eot?#iefix') format('embedded-opentype'),
         url('colabthi-webfont.woff2') format('woff2'),
         url('colabthi-webfont.woff') format('woff'),
         url('colabthi-webfont.ttf') format('truetype'),
         url('colabthi-webfont.svg#colaborate-thinregular') format('svg');
    font-weight: normal;
    font-style: normal;
	}

* {
	box-sizing: border-box;
	}
body {
	background-color: #00bac6; /*aq*/
	color: black;
	margin: 0;
	font-family: vera-bold;
	}
#wrapper {
	transition: ease all 2s;
	max-width: 1024px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	}

header {
	background-color:rgb(0,131,194); /*bl*/
	}
header * {
	z-index: 1;
	}
h1, h2, h3, h4, h5, h6 {
	margin-bottom: 10em;
	}
h1 {
	margin-bottom: 0;
	color: #fff;
	font-family: colaborate-thinregular;
	font-size: 3.25em;
	font-weight: lighter;
	}
li {
	margin-left: 3px;
	margin-right: 3px;
	}
p {
	font-size: 1.15em;
	line-height: 1.5em;
	}
p + p {
	margin-bottom: 3em;
	}
nav {
	background-color: #fff;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
	}
nav p {
	color: #0594EC; /*bl*/
	font-weight: bold;
	margin: 5px;
	letter-spacing: 1px;
	text-transform: uppercase;
	}
nav a {
	font-size: 1.5em;
	text-decoration: none;
	border-bottom: 0;
	}
a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px dotted #fff;
	}
a:hover {
	color:rgba(65, 66, 73, 0.445);
	color: #000;
	border-bottom: 0;
	}
a:visited {
	color: rgb(75, 77, 75);
	}
a:active {
	color: #20409a;
	}
.logo {
	width: 300px;
	height: auto;
	}
.topnav {
	background: #0083c2; /*bl*/
	list-style: none;
	display: flex;
	flex-direction: row;
	}
.socials-top {
	list-style: none;
	}
.socials-top a {
	color: white;
	}
.socials-top a:hover {
	color: black;
	}
.welcome {
	background-color: white;
	display: flex;
	}
.background {
	background-image: url(../images/optimised1.svg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: -200px;
	}
.main_layout {
	width: 50%;
	margin-left: 5%;
	}
.ft-legal {
    background: rgb(0,131,194); /*bl*/
    color: white;
	}
ul.socials {
	list-style: none;
	}
ul.socials a:hover {
	color: black;
	}
.copyright {
	width: 100%;
	margin-left: 20%;
	font-size: 1em;
	}
.submit {
	margin-bottom: 3em;
    color: #fff;
    background:linear-gradient(#2fb1f0, #0083c2);
	font-family: colaborate-thinregular;
    font-weight: bold;
	letter-spacing: .5px;
    width: 90px;
    height: 30px;
    border-radius:10px;
    border-color: #0083c2;
    border-top-color: #0083c2;
    box-shadow: 0.5px 0.5px 0.5px black;
    cursor: pointer;
	}
footer {
	display: flex;
	font-family: colaborate-thinregular;
	letter-spacing: .5px;
	background: #0083c2; /*bl*/
	}

/* CONTACT */
textarea {
	width: 100%;
	}
.contact p {
	font-size: 1em;
	line-height: 1.5em;
	}
.contact p + p {
	margin-bottom: 0;
	}
.contact .background {
	background-position: -450px;
	}

@media screen 
and (min-width :768px)
and (max-width: 820px){
.background {
	background-position: -100px;
	}
.main_layout {
	width: 70%;
	}
.contact .background {
	background-position: -750px;
	}
}

@media screen 
and (min-width : 526px) 
and (max-width : 767px) {
.background {
	background-position: -500px;
	}
.main_layout {
	width: 70%;
	}
.contact .background {
	background-position: -850px;
	}
}

@media screen 
and (min-width : 321px) 
and (max-width : 525px) {
.main_layout {
	width: 70%;
	}
}

@media screen 
and (min-width : 240px) 
and (max-width : 320px) {
}