@charset "utf-8";
/* CSS Document */
/*This CSS document has been created by Bradley Ford with help from Sabrina and is intended to style pages on the website*/
*/*resets browser default settings */
{
	padding:0;
	margin:0;
}

body, section,article, header, nav, footer
{
	display: block;
	background-size: cover;
	max-width:100%;
	
} /* helps old browsers with html5 */

/************************************************************************/
header
{
	min-height: 100vh;
	font-family: 'Fira Sans', sans-serif;
	font-size: 24px;
	text-align: center;
	color: white;
	background-image: url("../images/bamburgh-castle.jpg");
/*background image was sourced from https://pixabay.com/photos/bamburgh-castle-northumberland-648726/
	on 01/05/2019 - license reads free for comercial use, no attribution required*/	
}
header 
{
	z-index:2;
	position:relative;

}
header h1
{
	font-family: 'Fira Sans', sans-serif;
	padding-top:400px;
	padding-bottom:10px;
	padding-right:350px;
	font-size:80px;
	position:relative;
}
h1
{
	font-size: 40px;
	font-family: 'Poppins', sans-serif;
	position:absolute;
	left:11.9%;
}
hr
{
	border-color:black;
	border-width:2px;
	margin-left:45%;
	margin-right:52%;
	position:relative;
	right:32.8%;
}
article
{
	padding-top:1%;
	position:relative;
	left:10%;
	margin:auto;
	margin-bottom:2%;
}
section
{
	
}
footer
{
	height: 80px;
	background-color:#2e2e2e;
}

body
 {
    width: 100%;
    margin: 0;
    background-color: #ffffff;
		overflow-x:hidden;
		max-width: 100%;
}
p
{
	font-family: 'Poppins', sans-serif;
}
li,ul,a
{
		text-decoration:none;
		color:grey;
}
lia:hover,ula:hover,a:hover
{
		text-decoration:none;
		color:white;
}

/**************************************************************************************/
.headerstyle
{
	display:inline-block;
}
.headertext
{
	font-family: 'Poppins', sans-serif;
	font-size: 24px;
	position:relative;
	padding-right:50px;

}
.scrollnav
{
	width: 100%;
	color: white;
	background: #2e2e2e;
	font-weight: bold;
	letter-spacing: 0.025em;
	font-family: 'Poppins', sans-serif;
	z-index:1;
	position:fixed;
	top:0%;

}
.scrollnav ul
{
	
  text-align: center;
  margin: 0;

}
.scrollnav ul li {
  display: inline-block;
  padding: 0 3em;
  line-height: 3em;
}
.headernav
{
	width: 100%;
	color: white;
	font-weight: bold;
	font-family: 'Poppins', sans-serif;
	z-index:2;
	position:absolute;
	top:0%;
	font-size:15px;
}
.headernav ul
{
	
  text-align: right;
  margin: 0;

}
.headernav ul li {
  display: inline;
  padding-left: 40px;
  padding-right:40px;
  line-height: 3em;
}
.wrap
{
	padding-top:3vh;
	margin: auto;
	display:block;
}
.headerleft{
	position:relative;
	
}
.headerright{
padding-right:20%; 
position:relative;
 padding-left:45%;	
}
p.phonetext{
	color: #ffffff;
}
.cell
{
	width: 32vw;
	display: inline-block;
	padding: 1vw 2vw;
	color: #000000;
	text-align:left;
	font-size:18px;
}
.logo
{
	height: 80px;
	align-content: center;
	text-align: center;
	z-index:2;
	position:absolute;
	top:1%;
	right:93%;
}
.alternatecolour
{
	background-color:#2e2e2e;
	color:white;
	border-color:white;
}
.alternatecolour hr
{ 
	border-color:white;
	position:relative;
}
.alternatecolour p
{ 
	left:138.7%;
	position:relative;
	font-size:18px;
}
.alternatecolour ul
{ 
	left:142.7%;
	position:relative;
	font-size:18px;
}
.alternatecolour li
{ 
	position:relative;
	font-family: 'Poppins', sans-serif;
	font-size:18px;
}
.containFlips{
  display: inline-block;
  overflow: hidden;
  
}


.flip-card {
  background-color: transparent;
  float: left;
  width: 300px;
  height: 200px;
  padding: 5px;
  display: inline-block;
  border: 1px solid #f1f1f1;
  font-family: 'Poppins', sans-serif;
  perspective: 1000px; 
  font-size: 15px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color:#0a2457 ;
  color: #ffffff;
  transform: rotateY(180deg);
}
.downloadbutton
{
	margin-top:4%; 
	background-color:#2e2e2e; 
	border:3px solid #2e2e2e; 
	border-radius:8px; 
	padding:2%; 
	color:white;
	font-family: 'Poppins', sans-serif;
}
.phoneimgleft
{
	min-height:600px;
	min-width:350px;
	height:600px;
	width:350px;
	position:relative;
	padding:100px 100px 100px 300px;
}
.phoneimgright
{
	min-height:600px;
	min-width:350px;
	height:600px;width:350px;
	position:relative;
	padding:100px 100px 100px 100px;
}
.phonetext
{
	
}
h2
{
	padding-top:15%;
}
.flipcardimg
{
	height:100px;
	width:100px;
}
.imgarticle
{
	display:inline-block;
	margin-bottom:-100px;
	margin-top:-180px;
	position:relative;
}
.hrpos{
	position:relative; 
	left:12%;
}
.teamtext
{
		color: white; 
		text-align:center; 
		padding-left:23%;
		padding-top:5%;
}
.meetteamheader{
	color:white; 
	text-align:center;
	margin-left:30%;
}
.downloadheader
{
	text-align:center; 
	margin-left:32%;
}
.downloadtext
{
	text-align:center; 
	padding-left:23%;
	padding-top:5%;
}
.footertext
	{
		color:white; 
		font-family: 'Poppins', sans-serif; 
		padding:10px 30% 0% 40%;
	}
@media screen and (max-width:900px)
{
	.containFlips
	{
		left:33px;
		padding-bottom:30px;
		position:relative;
  
	}
	.scrollnav
	{
		visibility:hidden;
	}
	.cell
	{
			width:80%;
			padding-left:10%;
	}
	.wrap
	{
			padding: 0 0 20px 0;
	}
	.phoneimgleft
	{
		visibility:hidden;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		display:none;
	}
	.phomeimgright
	{
		visibility:hidden;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		display:none;
	}
	.imgarticle
	{	
	margin: 0 0 0 0;
	visibility:hidden;
	}	
.alternatecolour p{
		left:0px;
		
}
.headerleft
{
	padding: 0 10px 0 0;
	font-size:30px;
}
.headerright
{
	font-size:30px;
	padding: 0 10px 0 0;
}
.flipcardimg
{
	height:-100px;
	width:-100px;
}
header h1{
	font-size:40px;
	padding: 300px 0 0 50px;
	padding-right:0px;
    margin-left: -130px;
}
.headertext
{
	padding-left:20px;
	margin-left:25px;
}

}
@media screen and (max-width:616px) /*for phones// put every section as 100% so it gets placed below*/
{

    /*put everything in that needs  changing as a %*/
    article,section,wrap,cell,alternatecolour
    {
            max-width:100%;
            padding:0 0 0 0;
            margin:0 0 0 0;
            left: 0;
            right:0;
    }
    body {
        overflow-x: hidden;
        max-width: 100%;
    }
	.downloadheader
{
	text-align:center; 
	margin-left:60px;
}
    .wrap {
        max-width: 100%;
    }
    .cell{
        max-width: 100%;
    }
    .alternatecolour {
        max-width: 100%;
		left:0px;
		font-size:14px;
		height:250px;
    }
	.alternatecolour p{
		font-size:14px;
    }
    .headerstyle{
        max-width: 100%;

    }
    section{
        max-width: 100%;
    }
	.scrollnav
	{
		visibility:hidden;
	}
	.downloadtext
	{
		padding-top:60px;
	}
	.cell
	{
			width:80%;
			padding-bottom:-100px;
			
	}
	.footertext
	{
		color:white; 
		font-family: 'Poppins', sans-serif; 
		padding:10px 25% 0% 25%;
		text-align:center;
	}
	p
	{
		font-size:14px;
	}
	.headernav{
		visibility:hidden;
	}
	.flip-card {

  width: 100px;
  height: 100px;


	}
	.teamtext
	{
			padding-bottom:25px;
			right:1000px;
			position:relative;
			padding-top:100px;
			padding-left:50px;
	}
	.meetteamheader
	{
		font-size:30px;
		padding-right:140px;
		margin-left:85px;
		
	}
.logo
{
	display: none;
}

.flip-card-inner {

 width: 100%;
 height: -100%;

}
.flip-card-front img {
max-width: 100%;
max-height: 100%;
}
.flip-card-back{
    font-size: 12px;
}
.flip-card-back h2{
    font-size: 12px;
    max-width: 100%;
}
.whatisul{
	padding-top:10px;
	margin-right:100px;
	margin-left:-450px;
}
.hrpos{
	position:relative;
	left:-33%;
}
}


@media screen and (max-width:380px) /*website cannot go below 320px */
{
	header
	{
		min-width:320px;
	}
	img
	{
		min-width: 320px;
	}
	article
	{
		min-width: 320px;
	}
	p
	{
		min-width:320px;
	}
	img
	{
		min-width: 320px;
	}
	nav
	{
		min-width: 400px;
	}
}