@charset "utf-8";
/* CSS Document */
img {
	max-width: 100%;
	height: auto;
}
a {
	color: #000;
}
.container {
	display: grid;
	grid-template-columns: repeat(36, 1fr);
	grid-template-rows: repeat(55, 1fr);
	margin: 0 10% 0 20%;
}
.profile {
	grid-column: 2/21;
	grid-row:2/15 ;
	z-index: 1;
}
.profile img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.profileImg, .researchImg, .publicationImg {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.profile:hover img {
    -webkit-transform: scale(1.05);
    transform: translateX(20%) scale(1.05);
	opacity: 0.7;
}
.profile:hover + .profileImg {
    transform: translateX(-20%);
	transition: .3s ease-in-out;
}
.profileImg {
	grid-column: 17/36;
	grid-row: 1/19;
}
.research {
	grid-column: 13/33;
	grid-row:18/32 ;
	z-index: 1;
}
.research img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.research:hover img{
    -webkit-transform: scale(1.05);
    transform: translateX(-10%) scale(1.05);
	opacity: 0.7;
}
.research:hover + .researchImg {
    transform: translateX(15%);
	transition: .3s ease-in-out;
}
.researchImg {
	grid-column: 3/18;
	grid-row: 17/40;
}
.publication {
	grid-column: 1/23;
	grid-row:41/55 ;
	z-index: 1;
}
.publication img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
	
}
.publication:hover img{
    -webkit-transform: scale(1.05);
    transform: translateX(20%) scale(1.05);
	opacity: 0.7;
}
.publication:hover + .publicationImg {
    transform: translateX(-20%);
	transition: .3s ease-in-out;
}
.publicationImg {
	grid-column: 18/34;
	grid-row: 31/57;
}
footer {
	margin-top: 5%;
}

@media only screen and (max-width: 900px) {
	.container {
			margin: 0 3% 0 6%;
	}
}

@media only screen and (max-width: 480px) {
	.container {
			margin: 0 3% 0 6%;
	}
}