*,*::before,*::after {box-sizing:border-box}

body{
    font-family: "Roboto", sans-serif;
    margin:0;
	font-family:400;
	font-size:1.3125rem;
	line-height:1.6;
	padding:0;
}

h1,h2,h3{
	font-weight:900;
	line-height:1;
}
h5{
	margin:0;
}
h2{
	display:inline-block;
	padding-bottom:.5em;
	padding-left:.5em;
	padding-right:.5em;
	text-align:center;
	border-bottom:1px solid black;
	margin-bottom:0.5em;
	color:#0d0d0d;
}
.subH2{
	width:100%;
	text-align:center;
}
.nav-back{
	display: none;
  position: fixed;
  bottom: 5%;
  right: 1%;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #c7b5c9;
  padding: 15px;
  border-radius: 25%;
  font-size: 18px;
}
.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
  text-align:center;
}
.nav-back:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}
.imgBor{
	border:2px solid black;
}
p{
	margin-bottom:1em;
}
section{
padding:1.5em 0;
}
img{
	display:block;
	max-width:100%
}

.text-center{
	text-align:center;
}
.container{
	margin-inline:auto;
	width:min(90%,70.5rem); /*min 90% max 70.5*/
}
.bg-blue{
	/*background-color:#75afff;*/
	background-color:#f2f2f2;
	padding-top:140px;
	color:#4d4d4d;
}
.bg-brown{
	/*background-color:#ff884d;*/
	background-color:#ffeed6;
	/*color:#fffce8;*/
	color:#4d4d4d;

}
.bg-black{
	background-color:#f2f2f2;
	/*background-color:#1d172b;*/
	/*color:#FDFDFD;*/
	color:#4d4d4d;
}
.bg-grey{
	background-color:#4d4d4d;
	color:#FDFDFD;
}

header{
	position:fixed;
	text-align:center;
	z-index:999;
	width:100%;
	/*background-color:#b0f7ff;*/
	/*background-color:#8080ff;*/
	background-color:#000000;
	margin-bottom:3em;
}
.logo{
	display:inline;
	width:250px;
	height:100px;
	float:right;
	margin-right:.5em;
}

.splitQuality {
	display:flex;
	flex-direction:column;
}
.split-first {
	margin-bottom:2em;
}


nav{
	position:absolute;
	text-align:left;
	top:100%;
	/*background-color:#b0f7ff;*/
	/*background-color:#8080ff;*/
	background-color:#000000;
	width:100%;
	transform:scale(1,0);
	transform-origin: top;
	transition: transform 400ms ease-in-out;
}
nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
	left:0;
}
nav li {
    margin-left: 1em;
	margin-bottom: 1em;
}
nav a{
color:white;
text-decoration:none;
font-size:1.2rem;
text-transform:uppercase;
opacity:0;
transition: opacity 150ms ease-in-out;
}

nav a:hover{
	color:#ff884d;
}

.nav-toggle{
	display:none;
}

.nav-toggle-label{
position:absolute;
top:0;
left:0;
margin-left:1em;
height:100%;
display:flex;
align-items:center;
}
.nav-toggle-label span,
.nav-toggle-label::before,
.nav-toggle-label::after{
	display:block;
	background:white;
	height:2px;
	width:2em;
	border-radius:2px;
	position:relative;
}
.nav-toggle-label::before,
.nav-toggle-label::after{
content:'';
position:absolute;
}
.nav-toggle-label::before{
	bottom:40%;
}

.nav-toggle-label::after{
	top:40%;
}
.nav-toggle:checked ~ nav{
	transform:scale(1,1);
}
.nav-toggle:checked ~ nav a{
	opacity:1;
	transition: opacity 250ms ease-in-out 250ms;
}

.contact{
	margin-bottom:2em;
	line-height:1.2;
	text-align:left;
}

.contact-small{
	text-align:left;
	font-size:1rem;
	margin-bottom:2em;
}


@media screen and (min-width:800px){
	.nav-toggle-label{
		display:none;
	}
	header{
		display:grid;
		grid-template-columns:1fr auto minmax(600px,3fr) 1fr;
	}
	.logo{
	grid-column:2 / span 1;
}

nav{
	position:static;
	text-align:left;
	width:auto;
	top:auto;
	opacity:1;
	transform:none;
	grid-column:3/4;
	display:flex;
	justify-content:flex-end;
	align-items:center;
}
nav ul{
	display:flex;
	justify-content:flex-end;
}
nav li{
	margin-left:3em;
	margin-bottom:0;
}
nav a{
	opacity:1;
	position:relative;
}
nav a::before{
	content:'';
	display:block;
	height:5px;
	background:#ff884d;
	position:absolute;
	top:-.75em;
	left:0;
	right:0;
	transform:scale(0,1);
	transform-origin:left;
	transition:transform ease-in-out 250ms;
}
nav a:hover::before{
transform:scale(1,1);
}

.splitQuality{
	flex-direction:row;
}

.splitQuality >*{
	flex-basis:100%;
}
.splitQuality >*+*{
	margin-left:2em;
}

section{
	padding: 7rem 0;
}
.contact{
	margin-bottom:4em;
	text-align:center
}
.contact-small{
	text-align:center
}
}
@media screen and (min-width:500px){
	.logo{
		float:none;
	}
}