* {font-family: 'Raleway', sans-serif;}
.facility {position: relative; width: 33.33333%; min-width: 466.6666666666667px; height: 400px; float: left}

body {margin: 0}

section {min-width: 1400px}

.facility_img {width: 100%; height: 100%; position: relative; top: 0; left: 0; z-index: 10; overflow: hidden}
.facility_img .backstretch {transition: all .5s ease}
.facility_img:hover {cursor: pointer}
.facility_img:hover .backstretch {transform: scale(1.1);}
.facility_img:before {content:attr(title); display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; color: #fff; font-size: 27px; text-transform: uppercase; text-align: center; line-height: 400px;  transition: all .5s ease}
.facility_img:after {content: ''; width: 100%; height: 100%; background: none; position: absolute; top: 0; left: 0; transition: all .5s ease}
.inactive .facility_img:after {background: rgba(255,255,255,.75);}
.inactive .facility_img:hover {cursor: default}

.active .facility_img {cursor: default}
.active .facility_img:before {display: none}

.facility_info {position: absolute; left: 0; top: 0; width: 100%; height: 400px; background: #fff; z-index: 9; transition: all .5s ease}
.active .facility_info {z-index: 50}
.facility_info .facility_title {color: #fff; text-transform: uppercase; font-size: 27px; text-align: center; line-height: 62px; height: 62px; width: 100%}
.facility_info .facility_title .facility_close {cursor: pointer; font-size: 17px; line-height: 40px; position: absolute; right: 20px; top: 10px;}
.facility_info .facility_desc {margin: 70px; font-size: 18px; line-height: 1.75}
.facility_info .facility_desc.long {margin: 30px 35px;}
.facility_info .facility_arrow {display: none; width: 30px; height: 30px; position: absolute; transform: rotate(45deg)}
.active .facility_info .facility_arrow {display: block}
.active .facility_img:hover .backstretch {transform: scale(1);}

.no_content .facility_img:hover {cursor: default}
.no_content .facility_img:hover:before {background: transparent}
.no_content .facility_img:hover .backstretch {transform: scale(1);}

/* Facility color settings ---------------------------------------------------------------------------------------------------- */
.orange .facility_img:before {background: rgba(243,114,43,.86); }
.orange .facility_title {background: rgb(243,114,43); }

.red .facility_img:before {background: rgba(217,47,63,.86); }
.red .facility_title {background: rgb(217,47,63); }

.yellow .facility_img:before {background: rgba(244,214,14,.82); }
.yellow .facility_title {background: rgb(244,214,14); }

.blue .facility_img:before {background: rgba(15,190,211,.86); }
.blue .facility_title {background: rgb(15,190,211); }

/* Facility direction slide settings ---------------------------------------------------------------------------------------------------- */

.active.slideDown .facility_info {top: 100%; box-shadow:  0px -2px 3px 0px rgba(0, 0, 0, 0.5)}
.active.slideDown .facility_info .facility_arrow {left: 50%; margin-left: -15px; top: -15px; box-shadow: -3px -3px 3px 0px rgba(0,0,0,.25)}

.orange.slideDown .facility_info .facility_arrow {background: rgb(243,114,43); }
.red.slideDown .facility_info .facility_arrow {background: rgb(217,47,63); }
.yellow.slideDown .facility_info .facility_arrow {background: rgb(244,214,14); }

.active.slideLeft .facility_info {left: 100%; box-shadow: -2px 0px 3px 0px rgba(0, 0, 0, 0.5)}
.active.slideLeft .facility_info .facility_arrow {left: -15px; top: 50%; background: #fff; box-shadow: -3px 3px 2px 0px rgba(0,0,0,.25)}

.active.slideRight .facility_info {left: -100%; box-shadow: 2px 0px 3px 0px rgba(0, 0, 0, 0.5)}
.active.slideRight .facility_info .facility_arrow {right: -15px; top: 50%; background: #fff; box-shadow: 3px -3px 2px 0px rgba(0,0,0,.25) }

.active.slideUp .facility_info {top: -100%; box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5)}
.active.slideUp .facility_info .facility_arrow {left: 50%; margin-left: -15px; bottom: -15px; background: #fff; box-shadow: 3px 3px 2px 0px rgba(0,0,0,.25)}