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

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

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

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

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

.hero_image {
	position: absolute;
	top: -3px;
	width: 1270px;
	height: 800px;
	cursor: default;
}

.slider_container {
	position: absolute;
	top: 1117px;
	left: 0px;
	width: 620px;
	height: 907px;
	overflow-x: scroll;
	cursor: pointer;
}

.text {
	font-family: quasimoda, sans-serif;
    font-size: 18px;
    font-style: normal;
	font-weight: 200;
    color: rgba(0,0,0,1.00);
	position: absolute;
	top: 1097px;
	right: 15px;
	width: 620px;
	height: 907px;
	cursor: text;
}

.slider_container::-webkit-scrollbar {
	height: 20px;
}
.slider_container::-webkit-scrollbar-track {
	border-radius: 0px;
}
.slider_container::-webkit-scrollbar-thumb {
	border-radius: 0px;
	background-color: rgba(0,0,0,1.00);
}

.s_t {
	position: absolute;
	top: 2013px;
	width: 620px;
	height: 1px;
	background-color: rgba(0,0,0,1.00);
	cursor: default;
}

.pages1 {
	position: absolute;
	top: 0px;
	width: auto;
	height: 877px;
	cursor: default;
}

.pages {
	position: absolute;
	top: 807px;
	width: 1270px;
	height: 299px;
}

.slide-container {
	position: absolute;
	top: 2780px;
	width: 100%;
	height: 400px;
}

.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;
}

.typeface_container {
	position: absolute;
	top: 2035px;
	width: 100%;
	height: 745px;
	font-family: quasimoda, sans-serif;
    font-size: 26px;
    font-style: normal;
	font-weight: 100;
    color: rgba(0,0,0,1.00);
}

.typeface_text {
	position: relative;
	top: -20px;
	cursor: text;
}

#img {
	position: relative;
	width: 150px;
	height: auto;
}

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

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

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

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

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

.img-5 {
	transition: .5s;
	padding-left: 5px;
	cursor: default;
}

.tools-container {
	position: absolute;
	bottom: 290px;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100px;
	height: 50px;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
}

.illustrator {
	position: absolute;
	top: 0px;
	width: 20px;
	height: auto;
	margin-right: 50px;
}

.indesign {
	position: absolute;
	top: 0px;
	width: 20px;
	height: auto;
}

.photoshop {
	position: absolute;
	top: 0px;
	width: 20px;
	height: auto;
	margin-left: 50px;
}

.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);
}