#full_area{ width:100% ;}
 .region--content {overflow: hidden; }
.c-heroImageGrid2 div { margin:0;}

	
.c-heroImageGrid2 .container2 .column a {
  transform: rotateZ(0deg);
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
  display: block;
}
	
.column h7 , .row h7 {
content: ""; color: #FFF; text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4); 
  position: absolute; pointer-events:none;
  z-index: 9;
  width: auto;height: auto;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  transform: translate(-25%, 10%)rotateZ(-45deg);
  opacity: 0;transition: all 0.3s ease-in-out;
}
	
	
.c-heroImageGrid2 .text h5 {
  position: absolute; 
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 2em; white-space: nowrap;
  top: 58%;
  left: 40%;
  transform: translate(-50%, -50%);
  line-height: 1.1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-heroImageGrid2 {
	position: relative;
	overflow: hidden;
	width: 105vw; height: 50vw;
	background: #000;
	margin-bottom: 0px; margin-top:8px
}

.c-heroImageGrid2 .container2 {
	display: flex;
	align-items: flex-end;
	position: absolute;
	top: -20vw;
	left: -8vw;
	transform: rotateZ(45deg);
	 padding: 0; margin: 0;
	width: 105vw; height: 100vw;
}

.c-heroImageGrid2 .container2 .column {
	overflow: hidden;
	position: relative;
}

.c-heroImageGrid2 .container2 .column:nth-of-type(1) {
	border-right: 8px solid white;
	width: 25%;
	height: 68vw;
}

.c-heroImageGrid2 .container2 .column:nth-of-type(2) {
	display: flex;
	flex-direction: column-reverse;
	width: 75%;
	height: 109.1vw;
}

.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row {
	border-top: 8px solid #fff;
}


.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(1) {
	position: relative;
	overflow: hidden;
	height: 50vw;
}


.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(2) {
	display: flex;
	height: 40.5vw;
}

.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(3) {
	border-top: none;
}

.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(2) div:nth-of-type(1) {
	overflow: hidden;
	width: 30%;
	background-color: #003888;
}

.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(2) div:nth-of-type(1) .text {
	width: 100%;
	height: 100%;
	overflow: visible;
	transform: rotateZ(-45deg);
	position: relative;
}

.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(2) div:nth-of-type(1) .text h7 {
	position: absolute;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.35vw;
	width: 20vw;
	top: 16vw;
	left: 7vw;
	line-height: 1.55vw;
}



#school_appearance .container2 .column:nth-of-type(2) .row:nth-of-type(2) div:nth-of-type(1) {
  position: relative;
  width: 30%;
  overflow: hidden;
  background-color: #fff0;
}

.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(2) div:nth-of-type(2) {
	position: relative;
	width: 70%;
	border-left: 8px solid white;
	overflow: hidden;
}

.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(3) {
	position: relative;
	height: 19.6vw;
	overflow: hidden;
}
.c-heroImageGrid2 .container2 .column:nth-of-type(1):hover h7 , 
.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(1):hover h7 ,
.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(3):hover h7 ,
.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(2) div:nth-of-type(2):hover h7,
#school_appearance .container2 .column:nth-of-type(2) .row:nth-of-type(2) div:nth-of-type(1):hover h7,
.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(2) div:nth-of-type(3):hover h7
{
opacity: 1;
}
	
.c-heroImageGrid2 .container2 .column:nth-of-type(1):hover::before , 
.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(1):hover::before ,
.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(3):hover::before ,
.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(2) div:nth-of-type(2):hover::before,
#school_appearance .container2 .column:nth-of-type(2) .row:nth-of-type(2) div:nth-of-type(1):hover::before,
.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(2) div:nth-of-type(3):hover::before
{
opacity: 0.75;
cursor: pointer;
}
	
.c-heroImageGrid2 .container2 .column:nth-of-type(1):before,
.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(1):before ,
.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(2) div:nth-of-type(2):before,
.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(3):before,
#school_appearance .container2 .column:nth-of-type(2) .row:nth-of-type(2) div:nth-of-type(1):before,
.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(2) div:nth-of-type(3)::before
{
	position: absolute;	
	background-repeat: no-repeat;
	background-size: cover;
	transform: rotateZ(-45deg);
	content: ""; background-color: #fff;transition: all 0.3s ease-in-out;
	
	
}



@media screen and (max-width: 1400px){	
	.c-heroImageGrid2 .text h5 ,.column h7 , .row h7 { font-size:23px ; line-height: 27px;}
}

@media screen and (max-width: 960px){	
	.c-heroImageGrid2 .text h5 ,.column h7 , .row h7 { font-size:18px ; line-height: 23px;}
	.c-heroImageGrid2 .container2 .column:nth-of-type(1){ border-right: 4px solid white; }
	.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row {border-top: 4px solid #fff}
	.c-heroImageGrid2 .container2 .column:nth-of-type(2) .row:nth-of-type(2) div:nth-of-type(2) {border-left: 4px solid white;}
	#school_appearance{margin-top:4px;}

	
}
@media screen and (max-width: 560px){
	
	.c-heroImageGrid2 .text h5 ,.column h7 , .row h7 { font-size:15px ; line-height: 18px;}
	
}