body{
    margin: 0;
    padding: 0;
}
.wrapper{
  display: flex;
  height:120vh;
}
.wrapper .grid-box[data-scroll="in"]{
	transition: all 250ms;
	color: #ffffff;
	box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.12) ,0 1px 2px rgba(0, 0, 0, 0.24);
	animation: fadein 1s ease-out normal backwards;
}
.member-label-position-name{
	align-self: flex-end;
	text-align: center;
	height: 129px;
	background: rgba(49,39,131,0.49);
	z-index: 5;
	flex-direction: column;
	position: absolute;
  opacity: 0;
  width: 100%;
}
.wrapper .grid-box img , .wrapper a{
	width: 100%;
	height: 100%;
	transform: scale(1);
    cursor:pointer;
}
.first-row{
  width: 40%;
  display: flex;
  flex-direction: column;
}
.animation-founder-container{
  display: flex;
  position: relative;
  height: 60vh;
  width: 100%;
}
.animation-executive-container{
  display: flex;
  position: relative;  
  height: 60vh;
  width: 100%;
}
.animation-name-label{
	color: #FFFFFF;	
	font-family: "Roboto Slab";	
	font-size: 30px;	
	line-height: 39px;
	opacity: 0;
	z-index: 6;
}
.animation-position-label{
	color: #FFFFFF;	
	font-family: "Roboto Slab";	
	font-size: 30px;	
	font-weight: bold;	
	line-height: 39px;
	position: absolute;
  opacity: 0;
  width: 100%;
	z-index: 6;
}
.second-row{
  width: 30%;
  display: flex;
  flex-direction: column;
}
.animation-director-container{
  display: flex;
  height: 55vh;
  width: 100%;
  position: relative;
}
.animation-human-resourse-container{
  display: flex;
  height: 65vh;
  width: 100%;
  position: relative;
}

.third-row{
  width: 30%;
  display: flex;
  flex-direction: column;
}
.animation-marketing-mananger-container{
  display: flex;
  height: 65vh;
  width: 100%;
  position: relative;
}
.animation-director-works-container{
  display: flex;
  height: 55vh ;
  width: 100%;
  position: relative;
}

.wrapper .animation-founder-container[data-scroll="in"] {
    animation-delay: 100ms;
    display: flex;
}
.wrapper .animation-executive-container[data-scroll="in"]{
	animation-delay: 100ms;
	display: flex;
}
.wrapper .animation-director-container[data-scroll="in"]{
	animation-delay: 300ms;
	display: flex;
}
.wrapper .animation-human-resourse-container[data-scroll="in"]{
	animation-delay: 600ms;
	display: flex;
}
.wrapper .animation-marketing-mananger-container[data-scroll="in"]{
	animation-delay: 800ms;
	display: flex;
}
.wrapper .animation-director-works-container[data-scroll="in"]{
	animation-delay: 1000ms;
	display: flex;
}

.wrapper .animation-founder-container:hover div{
	opacity: 1;
	width: 100%; 
}
.wrapper .animation-executive-container:hover div{
	opacity: 1;
	width: 100%; 
}
.wrapper .animation-director-container:hover div{
	opacity: 1;
	width: 100%; 
}
.wrapper .animation-human-resourse-container:hover div{
	opacity: 1;
	width: 100%; 
}
.wrapper .animation-marketing-mananger-container:hover div{
	opacity: 1;
	width: 100%; 
}
.wrapper .animation-director-works-container:hover div{
	opacity: 1;
	width: 100%; 
}

@keyframes fadein{
	0% {
		transform: scale(0);
	}
	100%{
		transform: scale(1);
	}
}
@media only screen and (max-width: 1000px) {
    .wrapper{
        flex-direction:column;
    }
    .first-row, .second-row, .third-row {
        flex-direction: row;
        width: 100%;
        height: 40vh;
    }
    .animation-founder-container, .animation-executive-container, .animation-director-container, .animation-human-resourse-container, .animation-marketing-mananger-container, .animation-director-works-container {
        height:auto;
    }
}

@media only screen and (max-width: 550px) {
    .wrapper {
        flex-direction: column;
        height:auto;
    }

    .first-row, .second-row, .third-row {
        flex-direction: column;
        width: 100%;
        height: 80vh;
    }

    .wrapper .grid-box img, .wrapper a {
        height: 40vh;
    }

    .member-label-position-name {
        height: 70px;
    }

    .animation-position-label {
        font-size: 16px;
        line-height: 15px;
    }

    .animation-name-label {
        font-size: 20px;
    }
}