@import url('https://fonts.googleapis.com/css?family=Bitter|Nunito+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Niconne&display=swap');

* {
	box-sizing: border-box;
}

body {
	background-color: white;
	font-family: 'Bitter', serif;
}

.logo {
	color: #a92223;
	font-family: 'Niconne', cursive;
	font-size: 35px;
}

img {
	max-width: 100%;
	height: auto;
}

header {
	position: relative;
}

.navbar .logo {
	margin: 10px 20px;

}

.bg-light {
	background-color: none;
}


.des .traImage {
	background-color: lightgray;
	opacity: 25%;
}

.wrapper {
	width: 480px;
	margin: auto;
	position: relative;
}

.aboutme {
	position: absolute;
	top: 10px;
	left: 60px;
	width: 370px;
}

.aboutme1 {
	padding: 30px 0px;
	margin: auto;
	width: 250px;
}

.element button {
	margin-top: 25px;
	background-color: gray;
	padding: 7px 20px;
	margin-bottom: 50px;
}

.element button a {
	color: white;
	text-decoration: none;
	font-size: 17px;
}

.element h1 {
	font-size: 25px;
	margin-bottom: 15px;
}

.element h3 {
	font-size: 15px;
	margin-top: 0px;
}

.element {
	font-family: 'Roboto Slab', serif;
	position: absolute;
	top: 70px;
	padding: 30px;
}

.image {
	margin: 30px;
	width: 80%;
}

footer {
	font-family: 'Source Sans Pro', sans-serif;
	background-color: gray;
	margin-left: 0px;
	padding: 50px 0px 20px 0px;
	font-size: 10px;
	color: white;
	text-align: center;
}

footer p {
	margin: 5px 0px 5px 0px;
}

footer i {
	margin-left: 5px;
	margin-bottom: 10px;
}

.des {
	position: relative;
}

.des .traImage1 {
	background-color: black;
	opacity: 10%;
}

.resume {
	position: absolute;
	top: 30px;
	width: 90%;
	left: 20px;
}
.heading {
	font-family: 'Source Sans Pro', sans-serif;
	position: absolute;
	top: 10px;
	left: 30px;
}

.port {
	font-family: 'Roboto Slab', serif;
	position: absolute;
	top: 60px;
	left: 30px;
}

.port h2 {
	font-size: 15px;
}

.port button {
	margin-top: 0px;
	background-color: #a92223;
	padding: 2px 10px;
}

.port button a {
	color: white;
	font-size: 12px;
	text-decoration: none;
}

.graphic, .webapp, .pandv, .sketch {
	margin-bottom: 10px;
}

button {
	font-family: 'Source Sans Pro', sans-serif;
}

.graphic1 .logoG {
	margin: 30px;
	width: 80%;
}

.graphic1 .business1 {
	width: 100%;
}

.graphic1 .business2 {
	width: 100%;
}

.graphic1 {
	margin-top: 20px;
	background-color: #e6e7e8;
	margin-right: 30px;
}

.graphic img {
	width: 80%;
}

.graphic1 h2 {
	position: absolute;
	top: 52px;
	left: 66px;
	color: white;
	font-size: 20px;
}

.foo {
	padding-top: 900px;
	background-color: #0a5402;
}

.foo1 {
	padding-top: 450px;
	background-color: #00a05f;
}

.foo2 {
	padding-top: 2650px;
	background-color: #af6273;
}

.foo3 {
	padding-top: 850px;
	background-color: #ba8500;
}

.graphic1 .banner {
	margin: 20px 30px 20px 20px;
	width: 70%;
}

.graphic1 p {
	font-size: 15px;
	margin: 10px 40px;
}

.graphic1 button {
	margin: 22px
}

.graphic1 h3 {
	position: absolute;
	top: 838px;
	left: 66px;
	color: white;
	font-size: 20px;
}

.graphic1 h4 {
	position: absolute;
	top: 1994px;
	left: 66px;
	color: white;
	font-size: 20px;
}

.webb .app {
	position: absolute;
	top: 1338px;
	left: 66px;
	color: white;
	font-size: 20px;
}

.webb3 .app1 {
	position: absolute;
	top: 1632px;
	left: 66px;
	color: white;
	font-size: 20px;
}

.graphic1 .next {
	margin-left: 224px;
}

.foo4 {
	padding-top: 2650px;
	background-color: #aa9e6a;
}

.foo5 {
	padding-top: 1150px;
	background-color: #6aaaa4;
}

.foo6 {
	padding-top: 4750px;
	background-color: #68aa6e;
}

.foo7 {
	padding-top: 2000px;
	background-color: #d6c100;
}

.foo8 {
	padding-top: 2650px;
	background-color: #80af4e;
}

.webb4 img {
	width: 80%;
	margin: 40px;
}

/*Videography page*/

.video1, .video2, .video3, .video4 {
	margin: 10px;
	width: 400px;
}

.graphic2, .graphic3, .graphic4 {
	margin-top: 80px;
}

.graphicc .banner1, .graphic2 .banner2, .graphic3 .banner3, .graphic4 .banner4 {
	width: 70%;
	margin-left: 20px;
}

.graphicc .banner1 {
	margin-top: 20px;
}

.graphic2 h2 {
	position: absolute;
	top: 598px;
}

.graphic3 h2 {
	position: absolute;
	top: 1170px;
}

.graphic4 h2 {
	position: absolute;
	top: 1673px;
}

/* Contact page */

.des .contact1 {
	position: absolute;
	top: 10px;
	left: 250px;
	width: 37%;
}

.des .contact2 {
	position: absolute;
	top: 220px;
	left: 50px;
	width: 45%;
}

.des .contact3 {
	position: absolute;
	top: 270px;
	left: 10px;
	width: 95%;
}

.des .contact4 {
	position: relative;
}

.des .contact4 .detail {
	text-align: center;
	position: absolute;
	top: 210px;
	left: 122px;
	color: white;
}

.des .contact4 .detail p {
	font-family: 'Source Sans Pro', sans-serif;
}

.des .contact4 .detail a {
	color: white;
}


@media (min-width: 780px) {
	.wrapper {
		width: 780px;
		position: relative;
	}

	.des .traImage1 {
		background-color: black;
		opacity: 10%;
	}

	.logo {
		font-size: 30px;
	}


	/*img {
		position: relative;
	}*/

	.navbar li a {
		margin-left: 25px;
	}

	.element {
		position: absolute;
		top: 170px;
		left: 10px;
		padding: 30px;
		width: 100%;
	}

	.element h1 {
		font-size: 35px;
	}
	.element h3 {
		font-size: 25px;
	}

	.image {
		width: 100%;
		grid-column: 1/3;
		grid-row: 2;
	}

	.aboutme {
		position: absolute;
		top: 60px;
		left: 10px;
		width: 500px;
	}

	.aboutme1 {
		position: absolute;
		top: 40px;
		left: 500px;
		padding: 30px 0px;
		margin: auto;
		width: 250px;
	}

	.resume {
		position: absolute;
		top: 70px;
	}

	.port {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(5, 1f);
		position: absolute;
		top: 150px;
		left: 30px;
	}

	.graphic {
		grid-column: 1/3;
	}

	.webapp {
		grid-column: 3/6;
	}

	.pandv {
		grid-column: 1/3;
		grid-row: 2;
	}

	.sketch {
		grid-column: 3/6;
		grid-row: 2;
	}

	.port h2 {
		font-size: 18px;
	}

	.port button {
		padding: 2px 10px;
	}

	.port button a {
		color: white;
		font-size: 15px;
		text-decoration: none;
	}

	.graphic, .webapp, .pandv, .sketch {
		margin-bottom: 60px;
	}

	.heading {
		position: absolute;
		top: 50px;
		left: 30px;
	}

.graphic1 {
	margin-top: 20px;
	background-color: #e6e7e8;
	margin-right: 60px;
}

.graphic img {
	width: 80%;
}

.graphic1 h2 {
	position: absolute;
	top: 65px;
	left: 66px;
	color: white;
	font-size: 27px;
}

.foo {
	padding-top: 1300px;
}

.foo3 {
	padding-top: 1250px;
}

.foo1 {
	padding-top: 450px;
}

.foo2 {
	padding-top: 1350px;
}

.foo8 {
	padding-top: 4000px;
}

.foo4 {
	padding-top: 1250px;
}

.foo5 {
	padding-top: 1700px;
}

.graphic1 .banner {
	margin: 20px 30px 20px 20px;
	width: 70%;
}

.graphic1 p {
	font-size: 18px;
	margin: 10px 40px;
}

.graphic1 button {
	margin: 35px
}

.graphic1 h3 {
	position: absolute;
	top: 1320px;
	left: 66px;
	color: white;
	font-size: 22px;
}

.graphic1 h4 {
	position: absolute;
	top: 3124px;
	left: 66px;
	color: white;
	font-size: 22px;
}

.graphic1 .next {
	margin-left: 460px;
}

.grid1 {
	display: grid;
	grid-template-columns: repeat(5, 1f);
}

.grid1 .webb1 {
	grid-column: 1/4;
}

.grid1 .webb {
	grid-column: 4/6;
}

.graphic1 .app {
	position: absolute;
	top: 285px;
	left: 523px;
	color: white;
	font-size: 15px;
}

.grid2 {
	display: grid;
	grid-template-columns: repeat(5, 1f);
}

.grid2 .webb2 {
	grid-column: 1/4;
}

.grid2 .webb3 {
	grid-column: 4/6;
}

.webb3 .app1 {
	position: absolute;
	top: 293px;
	left: 373px;
	color: white;
	font-size: 15px;
}

.webb4 {
	display: grid;
	grid-template-columns: repeat(4, 1f);
}

.webb4 .poster {
	grid-column: 1/2;
}

.webb4 .poster1 {
	grid-column: 2/3;
}

.webb4 .poster2 {
	grid-column: 3/4;
}

.webb4 .poster3 {
	grid-column: 1/2;
	grid-row: 2;
}

.webb4 .poster4 {
	grid-column: 2/3;
	grid-row: 2;
}

.webb4 p {
	margin-top: 50px;
	grid-column: 3/4;
	grid-row: 2;
}

/* Videography page */

.video1, .video2, .video3, .video4 {
	margin: 10px 0px 10px 40px;
	width: 640px;
}

.graphic2, .graphic3, .graphic4 {
	margin-top: 80px;
}

.graphicc .banner1, .graphic2 .banner2, .graphic3 .banner3, .graphic4 .banner4 {
	width: 70%;
	margin-left: 10px;
}

.graphicc .banner1 {
	margin-top: 40px;
}

.graphicc h2 {
	position: absolute;
	top: 85px;
}

.graphic2 h2 {
	position: absolute;
	top: 773px;
}

.graphic3 h2 {
	position: absolute;
	top: 1487px;
}

.graphic4 h2 {
	position: absolute;
	top: 2150px;
}

.foo7 {
	padding-top: 2500px;
	background-color: #d6c100;
}

.foo6 {
	padding-top: 1200px;
}

/* Contact page */

.des .contact1 {
	position: absolute;
	top: 10px;
	left: 50px;
	width: 40%;
}

.des .contact2 {
	position: absolute;
	top: 420px;
	left: 20px;
	width: 35%;
}

.des .contact3 {
	position: absolute;
	top: 460px;
	left: 0px;
	width: 98%;
}

.des .contact4 {
	position: absolute;
	top: 50px;
	left: 270px;
	width: 65%;
}

.des .contact4 .detail {
	text-align: center;
	position: absolute;
	top: 240px;
	left: 130px;
	color: white;
}

}

@media (min-width: 1399px) {
	.wrapper {
		width: 1399px;
	}

	img {
		position: relative;
	}

	.logo {
		font-size: 45px;
	}

	.element {
		position: absolute;
		top: 350px;
		left: 30px;
		padding: 30px;
	}

	.element h1 {
		font-size: 40px;
	}

	.element h3 {
		font-size: 25px;
	}

	.desc h2 {
		font-size: 30px;
		grid-column: 1/5;
		grid-row: 1;
		margin-bottom: 0px;
	}

	.desc {
		margin-left: 30px;
		display: grid;
		grid-template-columns: repeat(4, 1f);
	}

	.image {
		width: 90%;
		grid-column: 1/3;
		grid-row: 2;
	}

	footer {
		font-size: 15px;
	}

	.aboutme {
		position: absolute;
		top: 140px;
		left: 10px;
		width: 850px;
	}

	.aboutme1 {
		position: absolute;
		top: 130px;
		left: 950px;
		padding: 30px 0px;
		margin: auto;
		width: 400px;
	}

	.resume {
		position: absolute;
		top: 100px;
		left: 0px;
		width: 1400px;
	}

	.navbar .bg-light {
		background-color: black;
	}

	.heading {
		position: absolute;
		top: 90px;
		left: 30px;
	}

	.heading h2 {
		font-size: 50px;
	}

	.port {
		position: absolute;
		top: 300px;
		left: 30px;
	}

	.port h2 {
		font-size: 25px;
	}
		
	.port button {
		margin-top: 0px;
		background-color: #a92223;
		padding: 2px 10px;
	}

	.port button a {
		color: white;
		font-size: 15px;
		text-decoration: none;
	}

	.graphic, .webapp, .pandv, .sketch {
		margin-bottom: 80px;
	}

.graphic1 {
	margin-top: 20px;
	background-color: #e6e7e8;
	margin-right: 60px;
}

.graphic img {
	width: 80%;
}

.graphic1 h2 {
	position: absolute;
	top: 85px;
	left: 96px;
	color: white;
	font-size: 40px;
}

.foo {
	padding-top: 550px;
}

.foo1 {
	padding-top: 450px;
}

.foo2 {
	padding-top: 1950px;
}

.foo3 {
	padding-top: 1900px;
}

.graphic1 .banner {
	margin: 20px 30px 20px 20px;
	width: 60%;
}

.graphic1 p {
	font-size: 18px;
	margin: 10px 70px;
}

.graphic1 button {
	margin: 35px
}

.gridd {
	display: grid;
	grid-template-columns: repeat(2, 1f);
}

.gridd .business1 {
	grid-column: 1/2;
	grid-row: 1;
	margin-left: 30px;
}

.gridd .business2 {
	grid-column: 2/3;
	grid-row: 1;
	margin-left: 30px;
}

.gridd p {
	grid-column: 1/6;
	grid-row: 2;
}

.graphic1 h3 {
	position: absolute;
	top: 2235px;
	left: 76px;
	color: white;
	font-size: 20px;
}

.graphic1 h4 {
	position: absolute;
	top: 2235px;
	left: 750px;
	font-size: 20px;
}

.graphic1 .pre {
	margin-left: 60px;
}

.graphic1 .next {
	margin-left: 1030px;
}

.grid {
	display: grid;
	grid-template-columns: repeat(2, 1f);
}

.grid .poster {
	grid-column: 1/3;
	grid-row: 1;
}

.grid .bannerr {
	grid-column: 1/2;
	grid-row: 2;
}

.grid .bannerr1 {
	grid-column: 2/3;
	grid-row: 2;
}

.graphic1 .app {
	position: absolute;
	top: 376px;
	left: 933px;
	color: white;
	font-size: 25px;
}

.webb .banner {
	margin-top: 60px;
}

.webb3 .app1 {
	position: absolute;
	top: 348px;
	left: 720px;
	color: white;
	font-size: 25px;
}

.foo4 {
	padding-top: 2050px;
}

.foo5 {
	padding-top: 2750px;
}

.foo6 {
	padding-top: 1850px;
}

.foo8 {
	padding-top: 3450px;
}

.webb4 p {
	margin-top: 80px;
}

/* Videography page */

.video1, .video2, .video3, .video4 {
	margin: 10px 0px 10px 40px;
	width: 500px;
}

.graphic2, .graphic3, .graphic4 {
	margin-top: 80px;
}

.graphicc .banner1, .graphic2 .banner2, .graphic3 .banner3, .graphic4 .banner4 {
	width: 50%;
	margin-left: 40px;
}

.graphicc h2 {
	position: absolute;
	top: 115px;
	left: 70px;
	font-size: 20px;
}

.graphic2 h2 {
	font-size: 20px;
	position: absolute;
	top: 115px;
	left: 754px;
}

.graphic3 h2 {
	font-size: 20px;
	position: absolute;
	top: 750px;
	left: 70px;
}

.graphic4 h2 {
	font-size: 20px;
	position: absolute;
	top: 748px;
	left: 754px;
}

.foo7 {
	padding-top: 800px;
	background-color: #d6c100;
}

.gridP {
	display: grid;
	grid-template-columns: repeat(2, 1f);
}

.graphicc {
	margin-top: 40px;
	grid-column: 1/2;
}

.graphic2 {
	grid-column: 2/3;
}

.graphic3 {
	grid-column: 1/2;
	grid-row: 2;
}

.graphic4 {
	grid-column: 2/3;
	grid-row: 2;
}

/* Contact page */

.des .contact1 {
	position: absolute;
	top: 120px;
	left: 200px;
	width: 33%;
}

.des .contact2 {
	position: absolute;
	top: 680px;
	left: 20px;
	width: 35%;
}

.des .contact3 {
	position: absolute;
	top: 740px;
	left: 0px;
	width: 98%;
}

.des .contact4 {
	position: absolute;
	top: 130px;
	left: 600px;
	width: 55%;
}

.des .contact4 .detail {
	text-align: center;
	position: absolute;
	top: 340px;
	left: 170px;
	color: white;
}

.des .contact4 .detail p {
	font-size: 30px;
}

}