#subject-tiles {
    padding: 20px 15px;
    cursor: pointer;
}

#subject-tiles .row {
    margin: 0;
}

#subject-tiles .tile-bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


#subject-tiles .overlay-hint {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

#subject-tiles  .cover {
    width: 100%;
    position: absolute;
    left: 0;
    z-index: 2;
    bottom: 25px;
}

#subject-tiles  .cover .title {
    line-height: 28px;
    display: block;
    font-size: 13px;
    color: #ffffff;
    font-weight: 700;
    font-family: "mr-eaves-sans",sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 0px 70px 0px 32px;
    margin: 0;
}


#subject-tiles  .button-wrap {
    position: absolute;
    width: 45px;
    height: 45px;
    right: 25px;
    bottom: 0;
}
#subject-tiles  .button-wrap .toggle-subject:before {
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 25px;
    display: block;
    content: '+';
    font-size: 30px;
    color: #ffffff;
    font-weight: 400;
    font-family: "mr-eaves-sans",sans-serif;
    background: #5c7e97;
}
#subject-tiles .tile.subject-tile.vOpen .button-wrap .toggle-subject:before {
    content: '-';
    color: #5c7e97;
    background: #ffffff;
    font-size: 40px;
}

#subject-tiles .tile.subject-tile {
    position: relative;
    cursor: pointer;
    margin-bottom: 30px;
}

#subject-tiles .tile.subject-tile .tile-bg:before {
    display: block;
    padding-top: 100%;
    content: '';
}

#subject-tiles .subject-block .panel{
    background : #5c7e97;
    position: relative;
    padding: 125px 0;
    color: #ffffff;
}
#subject-tiles .subject-block .panel:after {
	content:'';
	display:table;
	clear:both;
}
#subject-tiles .subject-block .panel .subjContent .title {
    color: #ffffff;
    position: relative;
    margin-top: 0 !important;
    font-size: 35px;
}

#subject-tiles .subject-block .panel .subjContent .title:before {
    content: '';
    width: 80px;
    height: 67px;
    display: block;
    margin: 0px 0 30px;
    background: url(../images/icon-white.png) -40px center no-repeat #5c7e97;
    position: relative;
    z-index: 3;
}
#subject-tiles .subject-block .panel .subjContent .title:after {
    content: '';
    width: 100%;
    max-width: 190px;
    height: 1px;
    display: block;
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    left: 0%;
    top: 34px;
    z-index: 1;
}

#subject-tiles .subject-block .panel .photo {
    margin-left: 30px;
    margin-bottom: 30px;
    margin-top: 100px;
    
    max-width: 650px;
    min-width: 359px;
    
}

#subject-tiles .subject-block {
    margin-bottom: 30px;
}
#subject-tiles .subject-block .spacing {
	position:relative;
}

#subject-tiles .subject-block .spacing:before{
    background : #5c7e97;
    content: "";
    position: absolute;
    width: 50vw;
    height: 100%;
    top: 0;
    display: block;
    transition: 10ms;
    left: 0%;
	transition:300ms;
    z-index: -1;
}

#subject-tiles .subject-block .spacing:after{
    background : #5c7e97;
    content: "";
    position: absolute;
    width: 50vw;
    height: 100%;
    top: 0;
    /*display: block;*/
    transition: 10ms;
    right: 0%;
    z-index: -1;
	transition:300ms;
}
#subject-tiles .subject-block.open .spacing:before{
    left: -50%;
	
}
#subject-tiles .subject-block.open .spacing:after{
    right: -50%;
	
}

#subject-tiles .subject-block{
    display: none;
}

.subject-block .photo{
    float : right;
} 

.subject-close:before {
    content: "X";
}

.subject-close{
    cursor : pointer;
    position: absolute;
    color: #ffffff;
    display: block;
    line-height: 24px;
    font-size: 20px;
    right: 0px;
    top: 30px;
    z-index: 9;
}


#subject-tiles .subject-block .panel .subjContent .body {
    line-height: 24px;
}




@media only screen and (max-width : 991px) {

    #subject-tiles .subject-block .panel .photo {
        float:none;
        margin-left: 0;
        margin-top: 0;
    }


}