@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
#cd5_401 {overflow:hidden;width:100%;position:relative;clear: left;box-sizing: border-box; padding: 0px; background-color: #ccc; display: block; margin: 0; }
#cd5_401 * { box-sizing: border-box; }
#cd5_401 .m401_innerdiv { margin: auto; position: relative; width: 100%; max-width: 2400px; border: solid 2px #fff; padding: 0px; z-index: 1; display: flex;  flex-wrap: wrap; align-items: stretch; justify-content:center; flex-direction: row; }
#cd5_401 .m401_box { background-color: #ccc; margin: 0px; width: 50%; transition: linear 1s; height: 48vh; position: relative; border: solid 2px #fff; }
#cd5_401 .m401_absoluteBox {position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block;}
#cd5_401 .m401_link {  background-size: cover; background-position: center center;  filter: grayscale(100%); width: 100%; height: 100%; -webkit-transition: 2s ease-in-out;-moz-transition: 2s ease-in-out;-o-transition: 2s ease-in-out;  }
#cd5_401 .m401_box:hover .m401_link {  -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%);-o-filter: grayscale(0%);}
#cd5_401 .m401_divgradient {background: linear-gradient(to top, #000, rgba(0,0,0,0) 50%); width: 100%; height: 100%; transition: linear 1s;}
#cd5_401 .m401_box:hover .m401_divgradient {  }
#cd5_401 .m401_labelbox {padding: 20px 0px; width: 320px;  color: #ccc;display: block;position: absolute;bottom: 25px; left: calc(50% - 160px); margin: auto; margin-top: 10px; text-align: center; transition: linear 0.6s; }
#cd5_401 .m401_box:hover .m401_labelbox {  margin-top: 0px; color: #fff;}
#cd5_401 .m401_labelbox span {font-family: Montserrat; font-size: 24px; font-weight: 600; letter-spacing: 0.5px; background-color: rgba(0, 0, 0, 0.3); display: block; padding: 15px; transition: linear 0.6s; text-transform: uppercase; letter-spacing: 1px; font-weight:bold; }
#cd5_401 .m401_box:hover .m401_labelbox span { background-color: #000; color: #fff;}
#cd5_401 .m401_labelbox span:hover { background-color: #ff0000;  color: #fff;}
#cd5_401 .m401_box .m401_linkGray {}
@media only screen and (max-width:1400px) {
     #cd5_401 .m401_box { height: 320px; }
     #cd5_401 .m401_labelbox { width: 240px; left: calc(50% - 120px); }
     #cd5_401 .m401_labelbox span { font-size: 20px;}      
}
@media only screen and (max-width:1024px) {
     #cd5_401 .m401_box { height: 270px; }
}
@media only screen and (max-width:767px) {
     #cd5_401 .m401_box .m401_link {  -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%);-o-filter: grayscale(0%);}
     #cd5_401 .m401_box .m401_linkGray {-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);-o-filter: grayscale(100%);}
     #cd5_401 .m401_box .m401_labelbox {  margin-top: 0px; color: #fff; width: 220px; left: calc(50% - 110px);}
     #cd5_401 .m401_box .m401_labelbox span { background-color: rgba(0,0,0,0.4); color: #fff; font-size: 16px;}
     #cd5_401 .m401_box { width: 100%; height: 200px; }
}
@media only screen and (max-width:640px) {
     #cd5_401 .m401_box .m401_labelbox {  width: 170px; left: calc(50% - 85px);}
     #cd5_401 .m401_box .m401_labelbox span { font-size: 12px; padding: 10px 15px;}
}