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

#wrapper {
    width: 1551px;
    height: 2210px;
}

#branding_contents {
	position: absolute;
	width: 1270px;
	height: 2210px;
	margin-top: 5px;
	margin-left: 281px;
}

.branding-container {
	position: relative;
	top: -9px;
	left: 281px;
	height: 45px;
	width: 1270px;
	border-bottom: solid;
	border-bottom-width: 1px;
	cursor: default;
}

.branding {
	font-family: quasimoda, sans-serif;
    font-size: 26px;
    font-style: normal;
	font-weight: 100;
    color: rgba(0,0,0,1.00);
	cursor: text;
}

.branding_contents_text {
	position: relative;
	top: -25px;
	left: 770px;
	width: 490px;
	font-family: quasimoda, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 200;
	line-height: 1.5em;
	color: rgba(0,0,0,1.00);
	cursor: text;
}

.m1 {
	position: absolute;
	top: -4px;
	width: 755px;
	left: 0px;
	height: 755px;
	cursor: default;
}

.m2 {
	position: absolute;
	width: 245px;
	height: 245px;
	top: 761px;
	background-image: url("../Images/Graphic Design/Personal Branding Project/M2.png");
	cursor: pointer;
}

.m3 {
	position: absolute;
	width: 245px;
	height: 245px;
	top: 761px;
	left: 255px;
	background-image: url("../Images/Graphic Design/Personal Branding Project/M3.png");
	cursor: pointer;
}

.m4 {
	position: absolute;
	width: 245px;
	height: 245px;
	top: 761px;
	left: 510px;
	background-image: url("../Images/Graphic Design/Personal Branding Project/M4.png");
	cursor: pointer;
}

.m5 {
	position: absolute;
	width: 245px;
	height: 245px;
	top: 761px;
	left: 765px;
	background-image: url("../Images/Graphic Design/Personal Branding Project/M5.png");
	cursor: pointer;
}

.m6 {
	position: absolute;
	width: 245px;
	height: 245px;
	top: 761px;
	left: 1020px;
	background-image: url("../Images/Graphic Design/Personal Branding Project/M6.png");
	cursor: pointer;
}

.m7 {
	position: absolute;
	width: 245px;
	height: 245px;
	top: 1016px;
	background-image: url("../Images/Graphic Design/Personal Branding Project/M7.png");
	cursor: pointer;
}

.m8 {
	position: absolute;
	width: 245px;
	height: 245px;
	top: 1016px;
    left: 255px;
	background-image: url("../Images/Graphic Design/Personal Branding Project/M8.png");
	cursor: pointer;
}

.m9 {
	position: absolute;
	width: 245px;
	height: 245px;
	top: 1016px;
    left: 510px;
	background-image: url("../Images/Graphic Design/Personal Branding Project/M9.png");
	cursor: pointer;
}

.m10 {
	position: absolute;
	width: 245px;
	height: 245px;
	top: 1016px;
    left: 765px;
	background-image: url("../Images/Graphic Design/Personal Branding Project/M10.png");
	cursor: pointer;
}

.m11 {
	position: absolute;
	width: 245px;
	height: 245px;
	top: 1016px;
    left: 1020px;
	background-image: url("../Images/Graphic Design/Personal Branding Project/M11.png");
	cursor: pointer;
}

.m12 {
	position: absolute;
	width: 245px;
	height: 245px;
	top: 1271px;
	background-image: url("../Images/Graphic Design/Personal Branding Project/M12.png");
	cursor: pointer;
}

.slide-container {
	position: relative;
	top: 1140px;
	width: 100%;
	height: 420px;
	cursor: default;
}

.image-container {
	position: absolute;
	width: 100%;
	height: 100%;
	align-items: center;
	align-content: center;
	justify-content: center;
	display: flex;
	border-top: solid thin #000000;
	border-bottom: solid thin #000000;
}

#img {
	position: relative;
}

#img:hover {
	width: 500px;
	height: 400px;
	transition: .5s;
}

.img-1 {
	width: 200px;
	height: 160px;
	transition: .5s;
	padding-right: 5px;
	cursor: default;
}

.img-2 {
	width: 200px;
	height: 160px;
	transition: .5s;
	padding-left: 5px;
	padding-right: 5px;
	cursor: default;
}

.img-3 {
	width: 200px;
	height: 160px;
	transition: .5s;
	padding-left: 5px;
	padding-right: 5px;
	cursor: default;
}

.img-4 {
	width: 200px;
	height: 160px;
	transition: .5s;
	padding-left: 5px;
	padding-right: 5px;
	cursor: default;
}

.holder2 {
	position: absolute;
	bottom: 0px;
    width: 1280px;
    height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,0,0,1.00);
}