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

html, body { width:100%; padding:0; margin:0; height:100%; font-size:16px; font-family:Roboto, sans-serif;}
#container { width:100%; padding:0; margin:0;}

h1 {font-size:2.5em;}
h2 {font-size:1.8em;}
a {text-decoration:none; color:white;}
a:hover {color:#86527F;}
p {font-size:1.2em;}
ul li {font-size:1.2em;}

.prio-omega {display:none;}
nav {width:100%; background-color:#333; margin:0; position:fixed; top:0; left:0; padding:0; color:#EFEFEF; z-index:3; height:50px; display:flex; justify-items: flex-start; align-items: center;
}
nav a {color:#EFEFEF; text-decoration:none;}
nav a:visited {color:#EFEFEF;}
nav a:hover {color:#FFBB4D;}
nav div {padding:0 2%; font-size:1em; flex: 0 1 auto;}
footer {background-color:white;width:90%; padding:0; margin:0 auto; border-top:1px solid #333333; clear:both;}
footer .column2{
	background-color:white;
}
footer a {
	font-size:.8em;
	line-height:.8em;
	color:#333333;
}
footer p {margin:1% 0;}
footer .end {text-align:center;margin:3% 0 3% 50%;float:left;}
footer img {width:10%;float:left; margin:0 auto;}
.btn {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 4px solid transparent;
  border-radius: 20px;
  padding:2%;
	background-color:#333333;
	color:#EFEFEF;
}
.btn:hover {
  background-color:#AE31C4;
  transition: 0.5s;
}
.btn p {
  cursor: pointer;
  position: relative;
  transition: 0.5s;
}

.btn p:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.btn:hover p {
  padding-right: 25px;
}

.btn:hover p:after {
  opacity: 1;
  right: 0;
}
.btn p {
	color:#EFEFEF;
	font-weight:bold;
	font-size:1.7em;
}
#home .btn p {color:#FFBB4D;}
.btn-block {
  display: block;
	width: 100%;}
.btn-lg {
  display: block;
	width: 100%;
	margin: 0  0 5% 0;}
.btn-lg p {margin:0;}

.column1 {width:90%; margin:0 5%; padding:2% 0 0 0;clear:both;}
.column2 {float:left; width:40%; margin:0 5%; padding:1% 0;}
.column3 {float:left; width:28.33%; margin:0 2.5%;}
.column4 {float:left; width:20%; margin:0 2.5%;}

#gettoknow .column2 img {width:80%; margin:0 10%;}
#contactme {background:url(../images/contactme-image-purple.png) center center fixed no-repeat;
		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;
		background-color:#ac77a5; min-width:100%; width:100%; margin:0; padding:2% 0 0 0; min-height:100%; height:100%; color:#FFF;}

#contactme h1 {margin-left:7%;}
#contactme img {width:50px; padding:0 2% 0 0; float:left;}
#logo {width:80%; float:right; margin:-20% 0 0 0;}
#logo img {width:100%;}
@media only screen and (max-width:600px) {
	.column2, .column3, .column4 {float:none; width:90%; margin:0 5% 2% 5%; clear:both;}
	#home h1{font-size:2em;}
	footer .end {display:none;}
	footer img {clear:both; margin:3% auto 0 auto;}
	footer .flex {display:flex;justify-content: center;}
	footer p {text-align:center;}
	.prio-beta {display:none;}
	nav {justify-content: center; font-size:1.8em;}
	.prio-omega {display:contents;}
	.btn-block, .btn-lg {width: 90%;}
	.btn {white-space:normal;}
	#gettoknow .column2 img {width:100%; margin:0;}
	#logo {margin:-10% 0 0 0;}
}

.column1 img {width:90%; margin:0 5%;}
#maincontent, #gettoknow {width:100%; padding:0; margin: 50px 0 0 0; background-color:#333333;}

#home {background:url(../images/2021-07-22-11.12.17.jpg) center center fixed no-repeat;
		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;
		background-color:#333333;
		width:100%; 
		min-width:100%;
		padding:0 0 10% 0; 
		margin:0; 
		min-height:100%; 
		height:100%;}
#home h1 {padding:5% 0 0 2%; font-size:3em; color:#18323F;}
#home p {font-size:2em; text-align:center; margin-top:8%; color:#000000;}
#home a, #mywork a {display:inline-block; 
			background-color:#145F6C; 
			text-align:center; 
			width:50%; 
			max-width:300px; 
			color:#FFBB4D;
			margin:0 0 5% 45%; 
			right:0;
			text-decoration:none;}
#home a:hover, #mywork a:hover {
			color:#FFBB4D;
			background-color:#1C3D47;}
			

@media only screen and (max-width:768px) {
	#home a {font-size:1em; width:100%; margin: 0 0 5% 0;}
	.btn {white-space:normal;}
	.column2, .column3, .column4 {float:none; width:90%; margin:0 5% 2% 5%; clear:both;}
	#home h1{font-size:2.5em;}
	footer .end {display:none;}
	footer img {clear:both; margin:3% auto 0 auto;}
	footer .flex {display:flex;justify-content: center;}
	footer p {text-align:center;}
	footer .column2 p {text-align:center;}
	footer .end {margin:3% 0 3% 35%;}
	#logo {margin:-15% 0 0 0;}
}
@media only screen and (max-width:600px) {#home a {margin:1% auto;}}

.certifications {list-style-type:none;}
.certifications img {width:50%;}
@media only screen and (max-width:800px) {.certifications img {width:80%;}}
#NBCV {width:100%; border:1px solid #333;}

#portfolio img {width:100%;}

#mywork {background:url(../../images/mywork-image.jpg) center center fixed no-repeat;
		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;
		background-color:#94BCD1;
		width:100%; 
		min-width:100%;
		padding:0% 0 20% 0; 
		margin:0; 
		min-height:100%; 
		height:100%;}
		
.design-image {position:relative; width:50%; float:left;}
.design-image img {width:100%;}

.caption {display:inline-block;
		  position:relative;
		  margin:7% 1%;}
.caption img {display:block;
			  max-width:100%;}
.caption::before,
.caption::after {
	opacity: 0;
	position: absolute;
	width: 100%;
	color: #fff;
	padding:10% 2% 2% 2%;
	transition: opacity 0.3s; 
}

.caption::before {
	content: attr(data-title);
	top: 0;
	height: 100%;
	text-align:center;
	background: #86527F;
	font-size: 1.4em;
	font-weight: 300;
}
@media only screen and (max-width:800px) {.caption::before {font-size:0.8em;}}
@media only screen and (max-width:600px) {.caption::before {font-size:1.2em;}}
.caption:hover::before,
.caption:hover::after {
	opacity: 1;
}
#webdesign, #graphicdesign, #publicationads {background-color:#AC77A5; width:100%; margin:0; padding:5% 0 5% 0; height:100%; color:#FFF;}
#webdesign .caption::before, #graphicdesign .caption::before, #publicationads .caption::before {height:15%;}
#webdesign .caption::after, #graphicdesign .caption::after, #publicationads  .caption::after {top:15%;}
#posters {background:url(../images/posters-mockup.png) center center fixed no-repeat;
		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;
		background-color:#333; min-width:100%; width:100%; margin:0; padding:30% 0; min-height:100%; height:100%; color:#FFF;}

#infographics {background-color:#AC77A5; width:100%; margin:0; padding:5% 0 5% 0; height:100%;}
#infographics .design-image, #publicationads .design-image {width:30%; float:left; margin:1%;}

#CV {background-color:#666; width:100%; margin:5% 0 5% 0; padding:0; height:100%;}