/*Subject*/
.subject-tile {
	position:relative;
	width:100%;
	overflow:hidden;
    background: #102A4C;
	cursor:pointer;
	margin-bottom:30px;
}
.subject-tile .tile-bg {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-size:cover;
	background-position:center;
	background-size:cover;
	transition:300ms;
}
.subject-tile .tile-bg:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70%;
    background: -moz-linear-gradient(bottom,rgba(0,0,0,.65) 0%,rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(bottom,rgba(0,0,0,.65) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000',endColorstr='#00000000',GradientType=0);
    display: block;
}
.subject-tile:after {
    display: block;
    width: 48px;
    height: 48px;
    position: absolute;
    left: auto;
    right: 0;
    bottom: 0;
    transform: none;
    content: '';
    font-size: 0;
    background: #102A4C url(../images/arrow-white.png) center center no-repeat;
    z-index: 10;
}

.subject-tile .cover {
	padding: 10px 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    bottom: 30%;
    transform: translateY(50%);
    text-align: center;
    width: 100%;
    transition: 300ms;
}

.subject-tile .cover .title{
	display: block;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.32px;
    position: relative;
    padding: 10px 15px;
	color:#fff;
	margin:0;
}


.subject-tile:before {
	content: '';
    display: block;
    width: 100%;
    padding-top: 95%;
}
.subject-tile:hover .cover,
.subject-tile.subjectOpen .cover {
    bottom: 50%;
}
.subject-tile.subjectOpen:after {
	transform:rotate(90deg);
}
.subject-tile:hover  .tile-bg,
.subject-tile.subjectOpen .tile-bg{
	opacity: .50;
}
#subject-tiles .subject-block{
    width: 100%;
    position: relative;
	clear:both;
	overflow:hidden;
    display: none;
}
#subject-tiles .subject-block .spacing{
	padding:0 0px 30px;
}
#subject-tiles .subject-block .panel{
	background:#e4e4e4;	
	position:relative;
	margin:0 auto;
    padding: 15px 30px 30px;
}
#subject-tiles .subject-block .subject-close{
	position: absolute;   
    height: 50px;
    width: 50px;
    overflow: hidden;
    background: #102A4C;
    color: #fff;
    right: 0px;
    top: 0px;
    z-index: 2;
	cursor:pointer;
}
#subject-tiles .subject-block .subject-close:before{
content: "\f00d";
    font-weight: 600;
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    vertical-align: top;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 20px;
}
#subject-tiles .subjContent {
	padding-top:0px;
}
#subject-tiles .subjContent .title{
	margin:5px 0 20px;
	padding-right:30px;
}
#subject-tiles .subject-block .photo{
	position:relative;
	max-width:540px;
	padding-right:20px
}
#subject-tiles .linkGroup {
}

#subject-tiles  .subjContent p{
	margin-bottom:1em;
}
@media (min-width:576px){
	
}
@media (min-width:992px){
	.subject-tile:before {
		padding-top:100%;
	}	
}
@media (min-width:1200px){
	
	
}