/*UPDATED: AUGUST 28, 2022 BY SUCHITA CHADHA
================================================*/

* { transition: all .2s ease 0s; }

/*HOME ACCORDION
================================================*/

/* Background images  */

.closed:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    margin: 0;
    background-position: center;
    background-size: cover;
    height: 600px;
    -webkit-filter: brightness(60%);
    -moz-filter: brightness(60%);
    -o-filter: brightness(60%);
    -ms-filter: brightness(60%);
    filter: brightness(60%);
}
.closed#y:before {
    background-image: url(https://www.mass.edu/about/images/Roxbury%20Commencement.jpg);
}


.closed#b:before {
    background-image: url(https://www.mass.edu/about/images/Westfieldscience_lab.JPG);
}


.closed#g:before {
    background-image: url(https://www.mass.edu/about/images/2017-2-23-StudentsBridgewater.jpg);
}


/* Main layout */


.vertaccordion {
  list-style: none;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow: hidden;
}

/* Articles */

.closed {
  width: 33.333333333%;
  height: 600px;
  color: #fff;
  box-sizing: border-box;
  position: relative;
  transition: width .7s ease-in;
}


.closed:hover {
  flex: auto;
  overflow: hidden;
  width: 90%;
}


.open {
  display: none;
}


.closed h1 {
  padding: 300px 20px 235px 30px;
  text-align:left;
  font-size:2.5em;
  color:#fff;
  font-family:'Nunito', sans-serif;
  font-weight:400;
}

.closed > .statement {
    position: absolute;
    top: 250px;
    width: 100%;
    height:auto;
    margin-left:30px;
}

.statement h4 {
	text-align:left;
	color: #ffc72c;
	font-weight:400;
	text-transform:uppercase;
	font-family:'Roboto Condensed', sans-serif;
}

.closed > .open {
   transition: display, width 2s ease-in;
}

.closed:hover > .open {
   display: block;
   text-align: left;
   max-width: 70%;
   overflow-y:auto;
   margin: auto 30px auto 30px;
   padding-top:100px;
}

.closed:hover > h1 {
  display:none;
}

.closed:hover > .statement {
    display:none;
}


.open > .statement {
    width: 100%;
    height:auto;
}


.open h2 {
	font-family:'Nunito', sans-serif;
	font-weight:400;

}

#mobileflex {
	display:none
}


/*PHONE/TABLET VIEW*/

@media only screen and (max-width: 846px) {
#mobileflex {
	display: flex;
}

}

@media (max-width: 846px) {
  .closed:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    margin: 0;
    background-position: center;
    background-size: cover;
    width:100%;
    height: 150px;
    -webkit-filter: brightness(50%);
    -moz-filter: brightness(50%);
    -o-filter: brightness(50%);
    -ms-filter: brightness(50%);
    filter: brightness(50%);
}

  .closed#y:before {
    background-image: url(https://www.mass.edu/about/images/2017-2-23-StudentsBridgewater.jpg);
}


.closed#b:before {
    background-image: url(https://www.mass.edu/about/images/Westfieldscience_lab.JPG);
}

.closed#g:before {
    background-image: url(https://www.mass.edu/about/images/College%20Bound%20Dorchester.jpg);
}

.vertaccordion {
	list-style: none;
	position: relative;
	flex-direction: column;
	align-items: stretch;
	overflow: hidden;
	width:100%;
}

.closed {
	width:100%;
	height: 150px;
}

.closed h1 {
  padding: 0px 20px;
  vertical-align:middle;
  text-align:left;
  font-size:1.8em;
  color:#fff;
  font-family:'Nunito', sans-serif;
  font-weight:300;
}


.statement h4 {
	  padding:10px 0 0 20px;
	  font-size:1.1em;

}

.closed:hover a {
	text-decoration:none
}

}