body{
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
}

#container{
	display:flex;
	justify-content:flex-start;
	height:100%;
}
#left{
	width:30%;
	height:100%;
	display: inline-table;
	background-color:#002b54;
	<!-- background-image:url(../images/office-left.jpg); -->
	background-size:cover;
	background-position:center center;
}
#left div{
	display:table-cell;
	vertical-align:middle;
}
#left div .title-title{
	color:white;
	font-size:20px;
}
#right {
	width:70%;
	height:100%;
	display: inline-flex;
	word-spacing:-1em;
	flex-wrap:wrap;
	overflow:hidden;
	justify-content:flex-end;
	background-image:url(../images/office-right.jpg);
}
#right .block-item{
	display:inline-block;
	box-sizing:border-box;
	cursor:pointer;
}
#right .block-item{
	/* height:25vh; */
	/* width:calc(13.3333333vw); */
	/* max-width:calc(25vh); */
	flex-grow:0;
}
#right .block-item:before{
	content:'';
	display:inline-block;
	width:1px;
	height:100%;
	vertical-align:middle;
}
#right .block-item:nth-child(4n){
	background-color:rgb(103,128,173);
}
#right .block-item:nth-child(4n+1){
	background-color:rgb(75,102,149);
}
#right .block-item:nth-child(4n+2){
	background-color:rgb(56,82,132);
}
#right .block-item:nth-child(4n+3){
	background-color:rgb(68,93,140);
}


#right .block-item>div{
	display:inline-block;
	width:95%;
}

#right .block-item .title{
	width:100%;
	height:30px;
	color:white;
	font-size:24px;
	display:inline-block;
}
#right .block-item .subtitle{
	height: 30px;
    width: 100%;
    color: white;
    font-size: 14px;
    display: inline-block;
    word-spacing: 0px;
}
#right .block-item.opacity1{
	background-color:rgba(56,82,132,0.1)!important;
}
#right .block-item.opacity2{
	background-color:rgba(75,102,149,0.1)!important;
}