@charset "utf-8";
.body {
	width: 1080px;
	height: 800px;
	background-image: url(../images/portfolio-BG.png);
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
}
.body #bubble {
	width: 1030px;
	height: 748px;
	background-image: url(../images/portfolio-bubble_03.png);
	margin-left: 25px;
	float: left;
	margin-top: 30px;
}
.body #bubble .sec1 {
	margin-left: 145px;
}
.body #bubble .Logo {
	float: left;
	margin-top: -8px;
	transition: transform 0.2s ease;
}

.Logo:hover {
	
	
	transform: scale(1.06)
	translateY(-8px)
}


#bubble .Logo .l1 {
	color: #FF005A;
	font-family: Incompleeta, "Incompleeta Italic", "Incompleeta Italic Reveal", "Incompleeta Light", "Incompleeta Light Italic", "Incompleeta Light Italic Reveal", "Incompleeta Light Reveal", "Incompleeta Reveal";
	float: left;
	font-weight: bolder;
	font-size: x-large;
}
#bubble .Logo .l2 {
	font-family: Incompleeta, "Incompleeta Italic", "Incompleeta Italic Reveal", "Incompleeta Light", "Incompleeta Light Italic", "Incompleeta Light Italic Reveal", "Incompleeta Light Reveal", "Incompleeta Reveal";
	color: #FFFFFF;
	float: left;
	font-size: x-large;
	font-weight: bolder;
}
#bubble .sec1 .navs {
	color: #FFFFFF;
	font-family: Montserrat, "Montserrat Black", "Montserrat Extra Bold", "Montserrat ExtraBold", "Montserrat ExtraLight", "Montserrat Hairline", "Montserrat Light", "Montserrat Medium", "Montserrat Semi Bold", "Montserrat SemiBold", "Montserrat Thin", "Montserrat Ultra Light";
	font-size: 14px;
	float: left;
	margin-top: 20px;
	margin-left: 145px;
}
.sec1 .navs .home {
	float: left;
	transition: transform 0.2s ease;
}

.home:hover {
	
	transform: scale(1.06)
	translateY(-8px)
}

.sec1 .navs .port {
	float: left;
	margin-left: 30px;
	transition: transform 0.2s ease;
}

.port:hover {
	
	
	transform: scale(1.06)
	translateY(-8px)
}

.sec1 .navs .contact {
	float: left;
	margin-left: 30px;
	transition: transform 0.2s ease;
}

.contact:hover {
	
	
	transform: scale(1.06)
	translateY(-8px)
}

.sec1 .navs .about {
	float: left;
	margin-left: 30px;
	transition: transform 0.2s ease;
}

.about:hover {
	
	
	transform: scale(1.06)
	translateY(-8px)
}

.body #bubble #discri {
	clear: both;
	font-family: Montserrat, "Montserrat Black", "Montserrat Extra Bold", "Montserrat ExtraBold", "Montserrat ExtraLight", "Montserrat Hairline", "Montserrat Light", "Montserrat Medium", "Montserrat Semi Bold", "Montserrat SemiBold", "Montserrat Thin", "Montserrat Ultra Light";
	float: left;
	font-size: 22px;
	margin-left: 393px;
	margin-top: -2px;
}
#bubble #discri .topic {
	color: #FFFFFF;
	float: left;
}
#bubble #discri .Pstart {
	color: #FF005A;
	float: left;
	margin-left: 11px;
}
#bubble #discri .c1 {
	color: #FFFFFF;
	float: left;
}
#bubble #discri .c2 {
	color: #FF005A;
	float: left;
}
#bubble #discri .c3 {
	color: #FFFFFF;
	float: left;
}
.body #bubble .wri {
	clear: both;
	text-align: center;
	font-family: Montserrat, "Montserrat Black", "Montserrat Extra Bold", "Montserrat ExtraBold", "Montserrat ExtraLight", "Montserrat Hairline", "Montserrat Light", "Montserrat Medium", "Montserrat Semi Bold", "Montserrat SemiBold", "Montserrat Thin", "Montserrat Ultra Light";
	width: 348px;
	margin-left: 344px;
	float: left;
	margin-top: -32px;
	color: #FFFFFF;
	font-size: small;
	font-style: normal;
	font-weight: lighter;
}
.body #bubble #works {
	clear: both;
	float: left;
	margin-left: 96px;
	margin-top: 35px;
}
#bubble #works .box1 {
	width: 275px;
	height: 167px;
	background-image: url(../images/portfolio-works_06.png);
	float: left;
	transition: transform 0.2s ease;
}

.box1:hover {
	
	
	transform: scale(1.06)
	translateY(-8px)
}

#bubble #works .box2 {
	width: 277px;
	height: 167px;
	background-image: url(../images/portfolio-works_08.png);
	float: left;
	transition: transform 0.2s ease;
}

.box2:hover {
	
	transform: scale(1.06)
	translateY(-8px)
	
}

#bubble #works .box3 {
	width: 287px;
	height: 167px;
	background-image: url(../images/portfolio-works_10.png);
	float: left;
	transition: transform 0.2s ease;
}

.box3:hover {
	
	
	transform: scale(1.06)
	translateY(-8px)
}

#bubble #works .box4 {
	width: 275px;
	height: 171px;
	background-image: url(../images/portfolio-works_15.png);
	clear: both;
	float: left;
	margin-top: 53px;
	transition: transform 0.2s ease;
}

.box4:hover {
	
	
	transform: scale(1.06)
	translateY(-8px)
}

#bubble #works .box5 {
	width: 265px;
	height: 165px;
	background-image: url(../images/portfolio-works_16.png);
	float: left;
	margin-top: 53px;
	transition: transform 0.2s ease;
}

.box5:hover {
	
	
	transform: scale(1.06)
	translateY(-8px)
}

#bubble #works .box6 {
	width: 280px;
	height: 165px;
	background-image: url(../images/portfolio-works_19.png);
	float: left;
	margin-left: 23px;
	margin-top: 53px;
	transition: transform 0.2s ease;
}

.box6:hover {
	
	
	transform: scale(1.06)
	translateY(-8px)
}