@charset "utf-8";

@font-face {
    font-family: 'open_sanslight';
    src: url("fonts/opensans-light-webfont.woff2") format('woff2'),
         url("fonts/opensans-light-webfont.woff") format('woff'),
         url("fonts/opensans-light-webfont.ttf") format('truetype'),
         url("fonts/opensans-light-webfont.svg") format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansbold';
    src: url("fonts/opensans-bold-webfont.woff2") format('woff2'),
         url("fonts/opensans-bold-webfont.woff") format('woff'),
         url("fonts/opensans-bold-webfont.ttf") format('truetype'),
         url("fonts/opensans-bold-webfont.svg") format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansextrabold';
    src: url("fonts/opensans-extrabold-webfont.woff2") format('woff2'),
         url("fonts/opensans-extrabold-webfont.woff") format('woff'),
         url("fonts/opensans-extrabold-webfont.ttf") format('truetype'),
         url("fonts/opensans-extrabold-webfont.svg") format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sanssemibold';
    src: url("fonts/opensans-semibold-webfont.woff2") format('woff2'),
         url("fonts/opensans-semibold-webfont.woff") format('woff'),
         url("fonts/opensans-semibold-webfont.ttf") format('truetype'),
         url("fonts/opensans-semibold-webfont.svg") format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansregular';
    src: url("fonts/opensans-regular-webfont.woff2") format('woff2'),
         url("fonts/opensans-regular-webfont.woff") format('woff'),
         url("fonts/opensans-regular-webfont.ttf") format('truetype'),
         url("fonts/opensans-regular-webfont.svg") format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sanslight_italic';
    src: url("fonts/opensans-lightitalic-webfont.woff2") format('woff2'),
         url("fonts/opensans-lightitalic-webfont.woff") format('woff'),
         url("fonts/opensans-lightitalic-webfont.ttf") format('truetype'),
         url("fonts/opensans-lightitalic-webfont.svg") format('svg');
    font-weight: normal;
    font-style: normal;
}

/* CSS Document */
/* hide scroll bar in Chrome*/
.hs::-webkit-scrollbar {
		display:none;
	-webkit-appearance: none;
	scrollbar-width:0;
	}

body::-webkit-scrollbar {
		display:none;
	-webkit-appearance: none;
	scrollbar-width:0;
	}

ul::-webkit-scrollbar {
		display:none;
	-webkit-appearance: none;
	scrollbar-width:0;
	}


body{
	background-size: cover;
	padding: 0;
	margin: 0;
	background: url("backgrounds/cross-hatch.svg");
	webkit-overflow-scrolling: false;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
}

ul{
	list-style: none;
}

/*about model box - activate on click*/
#about-box{
	z-index: 1;
	display:none;
	position: fixed;
	width:100vw;
	height:100vh;
	background-color: rgb(255 199 206);
	background-image: url("backgrounds/cross-hatch-white.svg");
	}

.about:hover, .about-landscape:hover, .header:hover, .header-landscape:hover{
	color: rgb(255 199 206);
	transition: color .2s;
}

.header-2:hover, .symbol-2:hover, .symbol-3:hover, .symbol-4:hover{
	filter: invert(69%) sepia(5%) saturate(1914%) hue-rotate(305deg) brightness(120%) contrast(104%);
	transition: color .4s;
}
@media all and (orientation:portrait){


/*Flex box for photos */

.wrapper{
	width: 100vw;
}

.hs2{
	top:-30vh;
	margin:0;
	padding-top:30vh;
	padding-left:0;
	padding-right:0;
	padding-bottom:30vh;
	display: flex;
	flex-direction: column;
	width: 100vw;
	gap:15vh;
	justify-content:flex-start;
	overscroll-behaviour-x: none;
	overflow-x:hidden;
}

.wrapper-2{
	width: 100vw;
}
.hs3{
	top:-15vh;
	margin:0;
	padding-top:15vh;
	padding-left:0;
	padding-right:0;
	padding-bottom:30vh;
	display: flex;
	flex-direction: column;
	width: 100vw;
	gap:15vh;
	justify-content:flex-start;
	overscroll-behaviour-x: none;
	overflow-x:hidden;
}

.hs4{
	top:-15vh;
	margin:0;
	padding-top:15vh;
	padding-left:0;
	padding-right:0;
	padding-bottom:30vh;
	display: flex;
	flex-direction: column;
	width: 100vw;
	gap:1vh;
	justify-content:flex-start;
	overscroll-behaviour-x: none;
	overflow-x:hidden;
}

.hs5{
	margin-top:5vh;
	padding:0;
	margin-bottom:8vh;
	display: flex;
	flex-direction: column;
	justify-content:center;
	align-items:center;
	gap:4vh;
	overscroll-behaviour-x: none;
	overflow-x:hidden;
	overscroll-behaviour-y: none;
	overflow-y:hidden;
}
	
.hs6{
	top:-30vh;
	margin:0;
	padding-top:30vh;
	padding-left:0;
	padding-right:0;
	padding-bottom:30vh;
	display: flex;
	flex-direction: column;
	width: 100vw;
	gap:0;
	justify-content:flex-start;
	overscroll-behaviour-x: none;
	overflow-x:hidden;
}
	
/* spacing between flex items*/
.item{
	position: relative;
}

.item {
	width: 76vw;
	margin-right: 12vw;
	margin-left:12vw;
}

.item-2 {
	width: 76vw;
	margin-right: 12vw;
	margin-left:12vw;
}

.item-3 {
	width: 76vw;
	margin-right: 12vw;
	margin-left:12vw;
}

.item-4 {
	width: 76vw;
	margin-right: 12vw;
	margin-left:12vw;
}

.item-5 {
	width: 76vw;
	margin-right: 12vw;
	margin-left:12vw;
}

.item-6 {
	height:18vh;
	width: 90vw;
	background-color:#999;
	align-items:center;
	text-align:center;
	border-radius:3vw;
	text-decoration:none;

}

.item-7 {
	height:18vh;
	width: 90vw;
	background-color:#999;
	align-items:center;
	text-align:center;
	border-radius:3vw;
	z-index:2;
	text-decoration:none;

}

.item-8 {
	width: 76vw;
	margin-right: 12vw;
	margin-left:12vw;
	height: auto;
}
	
.about-image{
	height: inherit;
	width: inherit;
	border-radius: 50%;
}

.about-map{
	height: 76vw;
	width: inherit;
}

.about-text{
	width: inherit;
}

.about-header{
	font-family: 'open_sansextrabold';
	font-size: 4vh;	
	z-index:11;
	color: black;
	text-decoration:none;
}

/*control height of images*/
.link, .cover-image, .description{
	width: 76vw;
}

/*make images circles*/
.cover-image{
	border-radius: 50%;
	border-style: outset;
	border-color: black black black black;
	border-left-color: black;
	border-width: 0vh;
	border-inline-start-color: black;
}



/* Project headings*/
.project-headings{
	position: absolute;
	bottom: -3.5vh;
	margin: 0;
	font-family: 'open_sanssemibold';
	font-size: 2vh;
	color: black;
	width:80vw;
	text-align:center;
}

/* Project sub- headings*/
.project-sub-headings{
	position: absolute;
	bottom: -6vh;
	margin: 0;
	font-family: 'open_sanslight_italic';
	font-size: 2vh;
	color: black;
	width:80vw;
	text-align:center;
}

/* location of project headings*/
.link{
	text-align: left;
}
/*Main Title */
.header {
	font-family: 'open_sansextrabold';
	font-size: 2vh;	
	z-index:11;
	color: black;
	text-decoration:none;
}

.ap-header-portrait{
	
	font-size:2.5vh;
	z-index: 1;
	color: black;
	font-family: 'open_sansbold';
	text-decoration:none;
	margin:auto;
	position: absolute;
	width:60vw;
	margin-left:20vw;
	margin-right: 20vw;
	text-align:center;	
	vertical-align: middle;
	top: 3vw;
}

.menu-bar{
	width: 96vw;
	padding-right:2vw;
	padding-left:2vw;
	position: fixed;
	
}

.menu-bar-items{
	display: flex;
    flex-direction: row;
    list-style-type: none;
	justify-content: space-between;
	padding:0;
}

.symbol, .symbol-3{
	width:8vw;	
	padding:0;
	margin:0;
	z-index:11;
}

.symbol-4{
	width:8vw;	
	padding:0;
	margin:0;
	z-index:11;
	filter: invert(1);
}


/*about */
.about {
	width: 40vw;
	position:absolute;
	top: 1vh;
	right:2vh;
	font-size: 2vh;	
	z-index:1;
	text-align:right;
	font-family:'open_sanslight';
}

.about-container{
	margin-top: 32vh;
	margin-left: 16vw;
	margin-right: 16vw;
	background-color: rgb(255 199 206);
	}
	
.about-text{
	text-align: center;
	font-family: 'open_sansregular';
	font-size: 2vh;
	line-height: 2.5vh;
	text-align: justify;
	}
	
#menu-bar {
	position:fixed;
	top:0;
	width: 100vw;
	height: 5vh;
	background-color:rgb(255 255 255) ;
	position:fixed;
	z-index:2;
	transition:top .75s;
	
}

.about-main-text{
	text-align:left;
	font-family: 'open_sansregular';
	font-size: 3vh;	
	line-height: 4vh;
	width: inherit;
	
}
.description-text{
	padding-left: 0;
	text-align:left;
	font-family: 'open_sansregular';
	font-size: 2vh;	
	line-height: 2.5vh;
	width: inherit;
	
}
	
.career-text{
	text-align:left;
	vertical-align: middle;
	font-family: 'open_sansbold';
	font-size: 4vh;	
	line-height: 5vh;
	width: inherit;
	height: inherit;
	Color: rgb(255 199 206);
	}
	
.career-list{
	list-style-type: circle;	
	margin-left: 1.5vh;
	padding-left: .5vh;
	text-align:left;
	font-family: 'open_sansregular';
	font-size: 2vh;	
	line-height: 2.5vh;
	}


.paragraph-heading {
	font-family: 'open_sanssemibold';
	font-size: 3vh;
	color: black;
	text-align:center;
}

.sidenav{
	height: 100%;
	width: 0%;
	position: fixed;
	z-index: 2;
	top:0;
	right:0;
	background-color: #111;
	overflow-x:hidden;
	transition:0.5s;
}

.sidenav ul{
	display:flex;
	flex-direction: column;
	align-items:center;
	gap: 6vh;
	padding-top: 25vh;
	padding-left:0;
	padding-right:0;
	padding-bottom:0;
	margin:0;
}

.sidenav li a{
	text-decoration: none;
	font-family: 'open_sanssemibold';
	font-size: 3vh;
	color: #FFF;
	height: 5vh;
}

.sidenav li a:hover{
	color: rgb(255 199 206);
	transition: color .2s;
}

.links-link {
	height: 13vh;
	margin-top:2.5vh;
	text-decoration:none;
}

.link-heading {
	margin:0;
	padding-top: 3vh;
	padding-bottom:0;
	font-size: 6vw;
	font-family: 'open_sansextrabold';
	color:black;
	text-align:center;
	
}
.link-heading-2 {
	margin:0;
	padding-top: 1vh;
	font-size:4vh;
	font-family: 'open_sansregular';
	color:black;
	text-align:center;
	text-decoration:none;
	
}

.link-heading-3 {
	margin:0;
	padding-top:5vh;
	font-size: 5vh;
	font-family: 'open_sansextrabold';
	color:black;
	text-align:center;
	text-decoration:none;
	
}

text-link {
	text-decoration:none;
	
}

.about-landscape{ display:none; }
.header-landscape{ display:none; }
.menu-bar-landscape{display:none; }

}

@media all and (orientation:landscape){

/*Flex box for photos */
.hs2{
	display: flex;
	flexdirection: row;
	height: 100vh;
	justify-content:flex;
	align-items: center;
	margin-top: 0px;
	padding-left: 20vw;
	gap:10vw;
	margin-right:5vw;
	padding-right: 5vw;
	overscroll-behaviour-y: none;
}

.hs4{
	top:-15vh;
	margin:0;
	padding-top:15vh;
	padding-left:0;
	padding-right:0;
	padding-bottom:30vh;
	display: flex;
	flex-direction: column;
	width: 100vw;
	gap:3vh;
	justify-content:flex-start;
	overscroll-behaviour-x: none;
	overflow-x:hidden;
}
	

.hs5{
	margin-top:5vh;
	padding:0;
	margin-bottom:8vh;
	display: flex;
	flex-direction: column;
	justify-content:center;
	align-items:center;
	gap:4vh;
	overscroll-behaviour-x: none;
	overflow-x:hidden;
	overscroll-behaviour-y: none;
	overflow-y:hidden;
}
.hs6{
	display: flex;
	flexdirection: row;
	height: 100vh;
	justify-content:flex;
	align-items: center;
	margin-top: 0px;
	padding-left: 20vw;
	gap:10vw;
	margin-right:5vw;
	padding-right: 5vw;
	overscroll-behaviour-y: none;
}
.wrapper{
	height: 100vh;
	margin:0;
	padding: 0;
}

/*control height of images*/
.item, .link, .cover-image, .description{
	height: 65vh;
	width: 65vh;
}
	
	
.career-description{
	width: 65vh;
	height: auto;
}
	
/*make images circles*/
.cover-image{
	border-radius: 50%;
	border-style: outset;
	border-color: black black black black;
	border-width: 0vh;
	margin-right: 4vw;
}

/* spacing between flex items*/
.item{
	position: relative;
}

.item-2{
	height: 40vw;
	width: 40vw;
	display: flex;
	flex-direction:column;
 	justify-content: center;
  	align-items: center;
}

.item-3 {
	width: 40vw;
	margin-right: 30vw;
	margin-left:30vw;
}

/* spacing between flex items*/
.item-4{
	height: 65vh;
	position: relative;
	margin-right: 4vw;
}

.item-5{
	width: 65vh;
	height: 65vh;
	margin-top: 15vh;
	margin-bottom: 15vh;
}

.item-6 {
	height:18vh;
	width: 90vw;
	background-color:#999;
	align-items:center;
	text-align:center;
	border-radius:3vw;
	text-decoration:none;

}

.item-7 {
	height:18vh;
	width: 90vw;
	background-color:#999;
	align-items:center;
	text-align:center;
	border-radius:3vw;
	z-index:2;
	text-decoration:none;
}
	/* spacing between flex items career page*/
.item-8{
	height: auto;
	width: 65vh;
	position: relative;
	margin-right: 2vw;
}
/* project headings*/
.project-headings{
	position: absolute;
	margin: 0;
	top:66.75vh;
	font-family: 'open_sanssemibold';
	font-size: 3vh;
	color: black;
	text-align:center;
	width:65vh;
}

/* project sub headings*/
.project-sub-headings{
	position: absolute;
	margin: 0;
	top:70.75vh;
	font-family: 'open_sanslight_italic';
	font-size: 2vh;
	color: black;
	text-align:center;
	width:65vh;
	
}
/* location of project headings*/
.link{
	text-align: left;
}

/*About and services Page */
.wrapper-2{
	height: 100vh;
	margin-top:0;
	margin-bottom:0;
	margin-left:6.67vw;
	margin-right:6.67vw;
	padding: 0;
}
.hs3{
	display: flex;
	flexdirection: row;
	height: 100vh;
	justify-content:flex-start;
	align-items: center;
	margin-top: 0;
	margin-bottom:0;
	padding-left:0;
	padding-right:6.67vw;
	padding-top:0;
	padding-bottom:0;
	gap: 6.67vw;
	
}


.about-image{
	height: inherit;
	width: inherit;
	border-radius: 50%;
}

.about-map{
	height: 40vw;
	width: inherit;
}

.about-text{
	width: inherit;
}

/*Main Title */
.ap-header{
	font-size:3vh;
	z-index: 1;
	color: black;
	font-family: 'open_sansextrabold';
	text-decoration:none;
	margin:auto;
}
.ap-header-2{
	font-size:3vh;
	z-index: 1;
	color: black;
	font-family: 'open_sanslight';
	text-decoration:none;
	margin:auto;
}
.menu-bar-landscape{
	width: 98vw;
	padding-right:1vw;
	padding-left:1vw;
	position: fixed;
	
}

.menu-bar-items{
	display: flex;
    flex-direction: row;
    list-style-type: none;
	padding:0;
	align-items:flex-end;
}

.menu-bar-left{
	width:49vw;
	display: flex;
    flex-direction: row;
    list-style-type: none;
	padding:0;
	align-items:center;
	justify-content:flex-start;
	gap:4vw;
	align-items:flex-end;
}

.menu-bar-right{
	width: 49vw;
	display: flex;
    flex-direction: row;
    list-style-type: none;
	padding:0;
	align-items:center;
	justify-content:flex-end;
	gap:3vw;
	align-items:flex-end;
	text-decoration:none;
}

.symbol, .symbol-3{
	height:4vh;	
	padding:0;
	margin:0;
	z-index:2;
}

.symbol-2{
	height:2.5vh;	
	padding:0;
	margin:0;
	z-index:2;
}
/*about */
.about-landscape {
	font-family:'open_sanslight';
	font-size: 3vh;	
	z-index:1;
	color: black;
	text-decoration:none;
}

.description-text{
	text-align: left;
	font-family: 'open_sansregular';
	font-size: 2vh;	
	line-height: 2.5vh;
	width: inherit;
}

.career-text{
	text-align:left;
	vertical-align: middle;
	font-family: 'open_sansbold';
	font-size: 5vh;	
	line-height: 7vh;
	width: inherit;
	height: inherit;
	Color: rgb(255 199 206);
	}
	
.career-list{
	list-style-type: circle;	
	margin-left: 1.25vh;
	padding-left: 1vh;
	text-align: left;
	font-family: 'open_sansregular';
	font-size: 2vh;	
	line-height: 3.5vh;
	width: inherit;
	}

	
.about-container{
	margin-top: 32vh;
	margin-left: 40vw;
	margin-right: 40vw;
	padding: 3.8vh;
	background-color: rgb(255 199 206);
	border-color: white;
	border-width: .1vh;
		
}
	
.about-text{
	text-align: center;
	font-family: 'open_sansregular';
	font-size: 2vh;
	line-height: 2.5vh;
	text-align: justify;
}

.paragraph-heading{
	font-family: 'open_sanssemibold';
	font-size: 3vh;
	color: black;
}

.about-header{
	font-family: 'open_sansextrabold';
	font-size: 4vh;	
	z-index:11;
	color: black;
	text-decoration:none;
}

.about-main-text{
	text-align:left;
	font-family: 'open_sansregular';
	font-size: 3vh;	
	line-height: 4vh;
	width: inherit;
	
}


.links-link {
	height: 13vh;
	margin-top:2.5vh;
	text-decoration:none;
}

.link-heading {
	margin:0;
	padding-top: 3vh;
	padding-bottom:0;
	font-size: 6vw;
	font-family: 'open_sansextrabold';
	color:black;
	text-align:center;
	
}
.link-heading-2 {
	margin:0;
	padding-top: 1vh;
	font-size:4vh;
	font-family: 'open_sansregular';
	color:black;
	text-align:center;
	text-decoration:none;
	
}

.link-heading-3 {
	margin:0;
	padding-top:5vh;
	font-size: 5vh;
	font-family: 'open_sansextrabold';
	color:black;
	text-align:center;
	text-decoration:none;
	
}

text-link {
	text-decoration:none;
	
}

.menu-bar{ display:none; }
.sidenav{ display:none; }
.ap-header-portrait {display:none;}
}