@charset "UTF-8";
/* CSS Document */

body {
	background: #edebe2;
	font-family: 'Poppins', sans-serif;
	color: #333;
	background: url("../images/cover.jpg") top;
	background-size: cover;
}

.intro-text {
	margin: 20% 5% 10% 5%;
    align-content: center;
}

.intro-text h1 {
	font-family: 'Poppins', sans-serif;
    font-size: 4.6em;
        font-weight: 700;
    color: #fff;
    opacity: .55;
    text-shadow: 0px 0px 4px black;
    text-transform: uppercase;
}

.intro-text h2 {
	font-family: 'Poppins', sans-serif;
    font-size: 2em;
    font-weight: 200;
    color: #2c8681;
    text-transform: uppercase;
}



.video-container {
	 margin: auto;
    text-align: center;
	position: relative;
	width: 90%;
	padding-bottom: 50.63%;
	height: 0;	
}

iframe {
	position: absolute;
	top: 0;x
	left: 0;
	height: 100%;
	width: 100%;
}



.hero-text {
	font-size: 7em;
	color: #fff;
	margin: auto;
	text-align: center;
	width: 100%;
	font-family: "Frank Ruhl Libre", serif;
	font-weight: 300;
	text-shadow: 3px 3px 3px black;
	line-height: .75em;
}

video {
	object-fit: cover;
	width: 100%;
}

.intro {
	width: 100%;
	height: 300px;
	display: flex;
	position: absolute;
	align-items: center;
	color: #fff;
	font-size: 1.2em;
	font-weight: 200;
	padding-top: 70px;
	
}

.content-wrap {
	margin: 10% 15%;
}

.logo {
	width: 250px;
	padding: 20px;
	border-radius: 6px;
	margin: 20px;
}

.title {
	font-size: 2em;
	font-weight: 200;
	color: #fff;
}

.design-wrap p {
	font-weight: 200;
	font-size: 1.5em;
	line-height: 1.5em;
	margin: 20px auto 0 auto;
}
.menu {
	background: #003a4b;
	margin-left: auto;
	position: fixed;
	top: 0;
	text-align: left;
	width: 100%;
	padding: 12px;
	font-family: 'Poppins', sans-serif;
	font-size: 1.2em;
	font-weight: 200;
	z-index: 1000;
	align-items: center;
	display: flex;
}

.menu img { 
width: 58.5px;
height: 58.5px;
}

.menu-wrap {
	margin-left: auto;
}
.menu-wrap a {
	margin-right: 20px;
	color: #fff;
	text-decoration: none;
}

.bucket {
	width: 300px;
	height: 300px;
	overflow: hidden;
	object-fit: contain;
}

.bucket:hover {
	
}

.footer {
	background: #003a4b;
	margin-left: auto;
	bottom: 0;
	width: 100%;
	padding: 20px;
	font-family: 'Poppins', sans-serif;
	font-size: 1.2em;
	font-weight: 200;
	z-index: 1000;
	display: flex;
	color: #fff;
	position: fixed;
	align-items: center;
}

.footer a {
	color: #fff;
	margin: auto 6px;
	font-size: 1.3em;
}

.footer-wrap {
	margin-left: auto;
}

.design-wrap {
	background: #fff;
	display: flex;
	align-items: flex-start;
}

.bio-image {
	width: 300px;
	height: 300px;
	border-radius: 150px;
	object-fit: cover;
	object-position: top;
	margin-right: 20px;
	float: right;
	margin-left: 20px;
}

.design-wrap div {
	margin: 10px 20px;
}

.bio-summary {
	display: flex;
	align-items: center;
	width: 100%;
	background: #bd4a2f;
	line-height: .7em !important;
	padding: 20px 5%;
	color: #fff;
	font-size: 1.5em;
}

.bio-summary a {
	color: #fff;
	text-decoration: none;
}

.bio-summary div:nth-child(3) {
	margin-left: auto;
	font-size: .8em;
	line-height: .5em;
}

.bio-summary h2 {
	font-size: 2em;
	font-family: "Frank Ruhl Libre", serif;
	font-weight: 300;
}
.skills-wrap {
	background: #fff;
	background-image: url("../images/aubreybrooke_watermark.png");
	background-repeat: no-repeat;
	background-size: 40%;
    background-position: right center;
}


.ab-card, .stacked-list div {
	    margin: 50px 50px 0 0;
	flex: 1;
}

.ab-card:last-child , .stacked-list div:last-child {
	margin-right: 0;
}


h4 {
	font-weight: 400 !important;
	color: #003a4b !important;
	text-transform: uppercase;
	font-size: 1.2em !important;
	margin-top: 0;
}

li {
	font-weight: 200;
}

.portfolio-wrap {
	display: flex;
	align-items: flex-start;
	background: #363638;
	padding: 0  0 40px 0;
}

.portfolio-wrap .nav {
	max-width: 12%;
    min-width: 12%;
	margin-right: 30px;
}

.design-wrap, .skills-wrap {
	padding: 2% 20px;
	margin: auto;
	padding-bottom: 50px;
}


.stacked-list {
	display: flex;
	align-items: flex-start;
}


.portfolio-wrap ul {
	font-size: 1.5em;
}



.fade:not(.show) {
	display: none;
}


.nav-link {
	width: 100%;
	color: #c5c9ca !important;
	text-transform: uppercase;
	border-bottom: 1px dashed #c5c9ca;
	text-align: left;
}

.nav-link i {
	width: 24px;
}

.nav-link.active {
	background: #bd4a2f;
	color: #fff !important;
}

h3 {
	font-size: 1.7em !important;
	text-transform: uppercase;
	font-weight: 100 !important;
	text-align: center;
	width: 93%;
    margin-top: 10px !important;
}

.portfolio-wrap h3 {
	color: #fff;
}

.skills-wrap h3 {
	color: #003a4b;
	border-bottom: 1px solid #bd4a2f;
}

hr {
	border-color: #6a9969 !important;
}

.cards {
	display: flex;
	align-content: flex-end;
	flex: 1;
	margin: 2.5% auto 0% auto;
}

.ab-card {
	min-width: 45%;
	max-width: 45%;
	border-radius: 8px;
	border: 1px solid #edebe2;
	padding: 20px;
	background: #fff;
}

.logo-card {
	width: 300px;
	height: 300px;
	overflow-hidden;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid #edebe2;
	padding: 20px;
	align-content: center;
	background: #fff;
}

.logo-card img {
	object-fit: cover;
}


.carousel-item {
	border: 1px solid #edebe2;
}

.ab-card h2 {
	margin-top: 10px;
	font-size: 1.5em;
	color: #1D6353;
}

.ab-card a {
	text-decoration: none;
	color: #1D6353;
}

.bio-summary i {
	width: 24px;
	text-align: center;
}


.quotes {
	font-family: "Poppins", sans-serif;
	color: #003a4b;
	width: 90%;
	margin: auto;
}

.statement{
	font-size: 2em;
	margin-top: 20px;
	padding-bottom: 30px;
	
}

.statement::before {
	font-family: 'Font Awesome 6 Free';
	content: "\f10d";
	margin-right: 10px;
	font-weight: 900;
}

.statement::after {
	font-family: 'Font Awesome 6 Free';
	content: "\f10e";
	margin-left: 10px;
	font-weight: 900;
}

.author {
	font-size: 1em !important;
	text-align: right;
	font-style: italic;
}

.sr-only {
	display: none;
}


.center-content {
	width: 90%;
	margin: auto;
}
.carousel-control-next i, .carousel-control-prev i {
	color: #666 !important;
}

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 11px;
  right: 11px;
  background:  rgb(0 0 0 / 75%);
  overflow: hidden;
  height: 0;
  transition: .5s ease;
	font-family: 'Poppins', sans-serif;
}

.container:hover .overlay {
  height: 100%;
	align-content: flex-end;
	padding: 30px;
}

.overlay h2 {
	color: #fff;
	font-size: 1.5em;
	border-bottom: 2px solid #6bc1ce;
	padding-bottom: 15px;
	margin-bottom: 5px;
}

.overlay p {
	color:#B5B5B5;
	text-transform: uppercase;
	font-size: 1em;
}


.content {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  background: #fff;
	overflow-y: auto;
	display: none;
  opacity: 0;
  transition:
    opacity 1s,
    display 1s allow-discrete;
}

.seen {
	opacity: 1;
	display: block;
}

@starting-style {
  .seen {
    opacity: 0;
  }
}


.activate {
	display: block !important
}

.content-overlay {
  margin: auto;
  width: 100%;
  margin-top: 30px;
}

.content a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
	
}

.content a:hover, .overlay a:focus {
  color: #80bfcb;
	margin-left: auto;
}

.content .closebtn {
	font-size: 3em;
	text-align: right;
	margin-right: 2%;
}

.overlay-text {
	width: 60%;
	margin: 20px auto;
	font-family: 'Poppins', sans-serif;
}



.overlay-text h1 {
	font-size: 2.5em;
	margin-bottom: 20px;
	font-weight: 700;
	color: #818181 !important;
	text-transform: uppercase;
	border-bottom: 2px solid #2c8681;
	text-align: center;
}
.overlay-text a h1 {
	font-size: 1.1em;
}
.overlay-text a h1:after {
	font-family: 'Font Awesome 6 Free';
	content: "\f14c";
	font-weight: 900;
	margin-left: 6px;
	color: #2c8681;
}

.overlay-text h2 {
	color:#999;
	text-transform: uppercase;
	font-size: 1em;
	text-align: center;
	margin-bottom: 20px;
}


.overlay-text h3 {
	color:#999;
	text-transform: uppercase;
	font-size: 1.2em;
	text-align: center;
	padding-top: 40px;
	font-weight: 400;
}

.overlay-text h3:before {
	color: #2c8681;
	font-family: 'Font Awesome 6 Free';
	content: "\f104";
	font-weight: 900;
	margin-right: 20px;
}
.overlay-text h3:after {
	color: #2c8681;
	font-family: 'Font Awesome 6 Free';
	content: "\f105";
	font-weight: 900;
	margin-left: 20px;
}

.overlay-text p {
	font-size: 1.2em;
	font-weight: 200;
	text-align: left;
	margin-bottom: 20px !important;
}



.image-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 8px;
	 margin: 20px 10%;
}

/* Create four equal columns that sits next to each other */
.image-column {
  flex: 1;
  padding: 0 8px;
}

.image-column img {
  margin-top: 30px;
  vertical-align: middle;
  width: 100%;
}

.brand img {
	max-width: 100%;
	min-width: 100%;
	border-radius: 4px;
	border: 1px solid #edebe2;
	padding: 20px;
	align-content: center;
	background: #fff;
}

.project-info {
	display: flex;	
	font-family: 'Poppins', sans-serif;
	margin-bottom: 30px;
}

.project-info div {
	flex: 1;
	margin-right: 4%;
}

.project-info .heading {
	font-size: .9em;
	text-transform: uppercase;
	font-weight: 600;
	color: #818181;
	border-bottom: 2px solid #2c8681;
}



.project-info .status {
	color: #666;
	font-weight: 300;
}

.project-info .status a {
	font-size: 1em;
	margin: 0;
	color: #666;
}

.project-info .status i {
	width: 30px;
	text-align: center;
}

.project-system {
	display: flex;
	align-items: center;
	margin: 2% auto;
}

.project-system div {
	flex: 1;
}
.project-system img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	margin: 20px auto;
}

#toplink {
	position: fixed;
    right: 2%;
    bottom: 10%;
    z-index: 10000;
}

.arrow2 {
    width: 25px;
    height: 25px;
    bottom: 5%;
    margin: -20px 0 0 -20px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 2px #2e3335 solid;
    border-top: 2px #2e3335 solid;
    border-right: 0;
    border-bottom: 0;
}

 .arrow2:before {
    content: '';
    width: 10px;
    height: 10px;
    bottom: 10%;
    margin: -10px 0 0 -5px;
    border-left: 2px #2e3335 solid;
    border-top: 2px #2e3335 solid;
    border-right: 0;
    border-bottom: 0;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: arrow2;
}

body .arrow2, body .arrow2:before {
    position: absolute;
    right: 3.5%;
}

@media (max-width: 960px) {
	.cards {
		display: block;
	}
	
	.ab-card, {
		min-width: 100%;
		max-width: 100%;
	}
	image-column {
    flex: 50%;
    max-width: 50%;
  }
}

@media (max-width: 768px) {
	
	
	.design-wrap, .portfolio-wrap, .stacked-list, .bio-summary, .project-info {
		display: block;
	}
	
	.skills-wrap {
	
		background-size: 100% !important;
	}
	
	.portfolio-wrap .nav {
	max-width: 100%;
    min-width: 100%;
}
	.overlay-text h3 {
	font-size: 1em;
	
}

    .project-info .status {
        margin-bottom: 1em !important;
    }
	
.overlay-text h3:before {
	margin-right: 8px;
}
.overlay-text h3:after {
	margin-left: 8px;
}
	
	.image-column {
    flex: 100%;
    max-width: 100%;
  }
	.intro-text {
    margin: 30% 1% 12% -10px;
    align-content: center;
}
		.intro-text h1 {
			    margin-top: .8em;
    		line-height: 1em;
			font-size: 4em;
		}
	
	.intro-text h2 {
			   
			font-size: 1.5em;
		}
	
	.overlay-text {
		width: 90%;
	}
	
	.overlay-text h1 {
		font-size: 2em;
		text-align: center;
	}
	
	.overlay-text a h1 {
		font-size: .9em;
	}
	
	.cards .container {
		margin-bottom: 2em !important;
	}
	
	.bio-image {
	display: block;
	text-align: center;
		float: none;
	margin: auto !important
		;
}
	
	.footer {
		position: relative;
	}
}
	
	@media (max-width: 400px) {
		
		
	.design-wrap p {
		font-size: 1.2em;
		}
		
		
		.menu-wrap a {
    margin-right: 10px;
	font-size: .9em;
		}
		
		
}