/*Subject*/

#subject-tiles {

    margin-bottom: 100px;

}



.subject-tile {

    position: relative;

    width: 100%;

    overflow: hidden;

    background: #9abde5;

    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:before {

    content: '';

    position: absolute;

    display: block;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

        background-color: rgb(0 0 0 / 0.25);

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.33+1,0.7+100 */

background: -moz-linear-gradient(top,  rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.33) 1%, rgba(0,0,0,0.7) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top,  rgba(0,0,0,0.33) 0%,rgba(0,0,0,0.33) 1%,rgba(0,0,0,0.7) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom,  rgba(0,0,0,0.33) 0%,rgba(0,0,0,0.33) 1%,rgba(0,0,0,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54000000', endColorstr='#b3000000',GradientType=0 ); /* IE6-9 */

}



.subject-tile .cover {

    position: absolute;

    left: 0;

    right: 0;

    padding: 20px 35px;

    z-index: 1;

    text-align: center;

    top: 25%;

    transition: 300ms;

}



.subject-tile .cover .button-wrap {

    height: 50px;

    width: 50px;

    overflow: hidden;

    color: #fff;

    transition: 300ms;

    /* border:solid 1px #fff; */

    display: inline-block;

    position: relative;

    background: #9abde5;

    border-radius: 50%;

}
.subject-tile .cover .button-wrap:hover {
    background: #0f1021;
}    


.subject-tile .cover .button-wrap .toggle-subject:before {

    content: "+";

    font-weight: 600;

    font-family: 'FontAwesome';

    display: inline-block;

    vertical-align: top;

    position: absolute;

    top: 47%;

    left: 50%;

    transform: translate(-50%,-50%);

    font-size: 40px;

}



.subject-tile.subjectOpen .cover .button-wrap .toggle-subject:before {

    content: "\2013";

    transform: translate(-50%, -56%);

}



.subject-tile.subjectOpen .cover .button-wrap {

    background: #0f1021;

}



.subject-tile.subjectOpen .tile-bg {

    /* opacity:0.3; */

    filter: grayscale(1);

}



.subject-tile .cover h2 {

    color: #fff;

    text-align: center;

    font-size: 40px;

    margin: 20px 0;

    line-height: 1.1;

}



.subject-tile:before {

    content: '';

    position: relative;

    display: block;

    width: 100%;

    padding-top: 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: #9abde5;

    position: relative;

    margin: 0 auto;

    padding: 50px 90px 70px 90px;

    color: #dadee2;

}
#subject-tiles .subject-block .panel:after {
	content:'';
	display:table;
	clear:both;
}
#subject-tiles .subject-block .panel .body-text > * {
	color:#fff;
}
@media only screen and (max-width : 991px) {
    #subject-tiles .subject-block .panel {
        padding: 20px 30px 70px 30px;
    }
    #subject-tiles .subjContent {
        padding-right: 10px!important;
    }
}   



#subject-tiles .subject-block .subject-close {

    position: absolute;

    height: 80px;

    width: 50px;

    overflow: hidden;

    background: #ffffff;

    color: #fff;

    right: -1px;

    top: -1px;

    z-index: 2;

    cursor: pointer;

    clip-path: polygon(100% 0, 0 0, 100% 100%);

}



#subject-tiles .subject-block .subject-close:before {

    content: "x";

    font-weight: 300;

    font-family: 'Lato', sans-serif;

    color: #0f1021;

    display: inline-block;

    vertical-align: top;

    position: absolute;

    top: 15px;

    right: 0px;

    transform: translate(-50%,-50%);

    font-size: 35px;

    line-height: 0;

}



#subject-tiles .subjContent {

    /* padding-top:20px; */

    padding-right: 40px;

}

/*

#subject-tiles .subject-block .photo {

    position: relative;

    /* max-width:540px; */

    /* padding-right:20px; */

    /* width: 40%; */

   /* flex-basis: 40%;

    margin-top: 70px;

    margin-bottom: 20px;

}*/

#subject-tiles .subject-block .photo {

	position: relative;

    margin-top: 70px;

    margin-bottom: 20px;

}



#subject-tiles .subject-block .photo:before {

	content:'';

	display:block;

	padding-top:100%;

	width:100%;

}

#subject-tiles .linkGroup {

}



#subject-tiles .subjContent p {

    margin-bottom: 1em;

}



.subjectImage {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

}

.subjectImage img{

	width:100%;

	height:100%;

	object-fit:cover;

}

.subject-video-link .subjectImage {

	background:#000;

}

.subject-video-link .subjectImage img{

	opacity:0.7;

}

.subject-title {

    font-size: 42px;

    /* transform: translateY(-70px); */

    margin-bottom: 40px;

    color: #ffffff;

    font-family: "adobe-garamond-pro",serif;

}



@media (max-width: 991px) {

    .subject-tile .cover h2 {

        font-size: 30px;

        margin: 0px 0;

    }

    .subject-tile .cover .button-wrap .toggle-subject:before {

        font-size: 20px;

    }

    .subject-tile .cover .button-wrap {

        height: 30px;

        width: 30px;

    }

	#subject-tiles .subject-block .photo:before {

		padding-top:70%;

	}

}





@media (max-width: 767px) {

    .subject-title {
        font-size: 30px;
        margin-bottom: 20px;
    }       

}





@media (min-width: 576px) {

    .subject-tile:before {

        padding-top: 110%;

    }

}

@media (min-width:992px){

	#subject-tiles .subject-block .photo {

		position: relative;

		width:40%;

		margin-top: 70px;

		margin-bottom: 25px;

		margin-left:25px;

		float:right;

	}

}