#cd5_328 { width:100%; position: fixed; top: 0; left: 0; width: 100%; height: 100%; clear: left;box-sizing: border-box; color: #222; background-color: #111; padding: 0px; display: block; z-index: 10; opacity: 1;  }
#cd5_328 * { box-sizing: border-box; }
#cd5_328 .m328_box { margin: auto; position: relative;  width: 100vw; height: 100vh; display: flex;  align-items: stretch;justify-content:center; flex-direction: row; border-top: solid 8px #fff; border-bottom: solid 8px #fff; }
#cd5_328 .m328_link {position: relative;display: block; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center;}
#cd5_328 .m328_leftbox { overflow:hidden;position: relative; z-index: 1;  flex: 1;  -webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out; transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); }
#cd5_328 .m328_leftbox:hover { flex: 9;  }
#cd5_328 .m328_overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0;  -webkit-transition: all 9s ease-in-out;-moz-transition: all 16s ease-in-out;-o-transition: all 16s ease-in-out;transition: all 16s ease-in-out; transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);   transition-delay: 0s; }
#cd5_328 .m328_overlay2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(11,11,11,0.6);  -webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out; transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);  }
#cd5_328 .m328_boxbottom1 { opacity: 0; position: absolute; border-radius: 4px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; height: 50px;  right: 4px; top: 0px; top: 30px; background-color: rgba(255,255,255,0.8);  z-index: 3; width: 200px; padding: 17px 8px; padding-right: 19px; text-align: right; font-family: poppinsregular; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; color: #222; -webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out; transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); }
#cd5_328 .m328_boxbottom_col1, #cd5_328 .m328_boxbottom_col1 a { background-color: #f2414b; color: #fff; display: block;}
#cd5_328 .m328_boxbottom_col2, #cd5_328 .m328_boxbottom_col2 a { background-color: #F8DBA0; color: #222; display: block;}
#cd5_328 .m328_boxbottom_col3, #cd5_328 .m328_boxbottom_col3 a { background-color: #3158B3; color: #fff; display: block;}
#cd5_328 .m328_boxbottom1.m328_boxbottom_col3 { right: 0;}
#cd5_328 .m328_manulogos { opacity: 0; margin: auto; position: absolute; bottom: 0; left: 0; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 10px; width: 100%; margin: 0 auto;  -webkit-transition: all 2s ease-in-out;-moz-transition: all 2s ease-in-out;-o-transition: all 2s ease-in-out;transition: all 2s ease-in-out; transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); transition-delay: 1s;}
#cd5_328 .m328_box:hover  .m328_manulogos {opacity: 0; -webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out; transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); transition-delay: 0s;}
#cd5_328 .m328_leftbox2:hover  .m328_manulogos {opacity: 1; -webkit-transition: all 2s ease-in-out;-moz-transition: all 2s ease-in-out;-o-transition: all 2s ease-in-out;transition: all 2s ease-in-out; transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); transition-delay: 1s;}
#cd5_328 .m328_ibox { display: block;  -webkit-transition: all .5s linear; -o-transition: all .5s linear; transition: all .5s linear; margin: 4px; width: 90px; height: 70px; position: relative; }
#cd5_328 .m328_title { position: absolute; top: 0; left: 0; width: 100%; height: 70px; opacity: 0; border-radius: 4px; background-color: #F8dba0; color: #111; font-family: poppinssemibold; text-transform: uppercase; font-size: 11px; letter-spacing: 0.8px; -webkit-transition: all .5s linear; -o-transition: all .5s linear; transition: all .5s linear;}
#cd5_328 .m328_title_inner { display: flex;height: 100%;align-items: center;justify-content: center;padding: 4px;}
#cd5_328 .m328_image { position: absolute; top: 0; left: 0; width: 100%; height: 70px; background-color: #282723; border-radius: 4px; opacity: 1;  -webkit-transition: all .5s linear; -o-transition: all .5s linear; transition: all .5s linear;}
#cd5_328 .m328_image_inner { display: flex;height: 100%;align-items: center;text-align: center;padding: 4px;}
#cd5_328 .m328_image_inner img { width: 42px; margin: auto;}
#cd5_328 .m328_ibox:hover .m328_title  { opacity: 1; }
#cd5_328 .m328_ibox:hover .m328_image  { opacity: 0; }
#cd5_328 .m328_boxbottom1_image { opacity: 0; position: absolute; top: 44px; right: 167px;}
#cd5_328 .m328_boxbottom1_image img { width: 20px; }
#cd5_328 .m328_boxbottom2 { opacity: 1; text-align: center; width: 160px; border-radius: 4px; position: absolute; top: 44px; top: 74px; height: 50px; line-height: 1;  right: -41.3px; right: -32px; z-index: 3; padding: 17px 1px; font-family: poppinsregular; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; transform: rotateZ(270deg); -webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out; transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);  }
#cd5_328 .m328_boxbottom2_last_child { right: -20px; }
#cd5_328 .m328_leftbox:hover .m328_overlay { transform: scale(1.4); }
#cd5_328 .m328_leftbox:hover .m328_overlay2 { background-color: rgba(11,11,11,0.2); }
#cd5_328 .m328_img { border-radius: 4px; width: 100%; max-width: 240px; padding: 40px; margin: auto; -webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out; transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); background-color: rgba(11,11,11,0); }
#cd5_328 .m328_box:hover .m328_img {  opacity: 0; }
#cd5_328 .m328_box:hover .m328_boxbottom2 {  opacity: 1; }
#cd5_328 .m328_leftbox1:hover .m328_img, #cd5_328 .m328_leftbox2:hover .m328_img, #cd5_328 .m328_leftbox3:hover .m328_img {  opacity: 1; background-color: rgba(53,53,50,0.3); border-left: 8px solid red; }
#cd5_328 .m328_leftbox1:hover .m328_img{  border-left: 16px solid #f2414b;}
#cd5_328 .m328_leftbox2:hover .m328_img{  border-left: 16px solid #F8DBA0;}
#cd5_328 .m328_leftbox3:hover .m328_img{  border-left: 16px solid #3158B3;}
#cd5_328 .m328_leftbox1:hover .m328_boxbottom2, #cd5_328 .m328_leftbox2:hover .m328_boxbottom2, #cd5_328 .m328_leftbox3:hover .m328_boxbottom2 {  opacity: 0;}
#cd5_328 .m328_leftbox1:hover .m328_boxbottom1, #cd5_328 .m328_leftbox2:hover .m328_boxbottom1, #cd5_328 .m328_leftbox3:hover .m328_boxbottom1 {  opacity: 1;}
#cd5_328 .m328_leftbox1:hover .m328_boxbottom1_image, #cd5_328 .m328_leftbox2:hover .m328_boxbottom1_image, #cd5_328 .m328_leftbox3:hover .m328_boxbottom1_image {  opacity: 1; z-index: 4;}
#cd5_328 .m328_leftbox1 .m328_overlay2 { border-left: solid 4px transparent; border-right: solid 4px #fff; }
#cd5_328 .m328_leftbox2 .m328_overlay2 { border-left: solid 4px #fff; border-right: solid 4px #fff; }
#cd5_328 .m328_leftbox3 .m328_overlay2 { border-left: solid 4px #fff; border-right: solid 4px transparent;  }
#cd5_328 .m328_expandbox {position: absolute; top: calc(50% - 20px); left: calc(50% - 20px); opacity: 0; -webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out; transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); }
#cd5_328 .fa-expand { font-size: 50px; }
#cd5_328 .fa-expand1 { color: #f2414b; }
#cd5_328 .fa-expand2 { color: #F8DBA0; }
#cd5_328 .fa-expand3 { color: #3158B3; }
#cd5_328 .m328_box:hover .m328_expandbox {  opacity: 1; }
#cd5_328 .m328_leftbox1:hover .m328_expandbox {  opacity: 0;}
#cd5_328 .m328_leftbox2:hover .m328_expandbox {  opacity: 0;}
#cd5_328 .m328_leftbox3:hover .m328_expandbox {  opacity: 0;}
@media only screen and (max-width:1180px) { #cd5_328 .m328_leftbox:hover{flex: 7;} }
@media only screen and (max-width:960px) {
       #cd5_328 .m328_box { flex-direction: column; border: solid 4px #fff; height: 100vh;  }
       #cd5_328 .m328_overlay2 { border: solid 4px #fff; background-color: rgba(11,11,11,0); }
       #cd5_328 .m328_leftbox { min-height: 165px; height: auto; max-height: 255px; flex: 1; }
       #cd5_328 .m328_boxbottom1 { opacity: 1; text-align: center; position: absolute; z-index: 4; padding: 8px; height: auto; top: auto; bottom: 10px; left: calc(50% - 100px); border-radius: 4px; height: 32px; }
       #cd5_328 .m328_boxbottom1_image { opacity: 0;}
       #cd5_328 .m328_img { max-width: 220px; padding: 10px; margin: auto; }
       #cd5_328 .m328_leftbox2:hover  .m328_manulogos {opacity: 0;}
       #cd5_328 .m328_boxbottom2 { opacity: 0; }
       #cd5_328 .m328_box:hover .m328_expandbox {  opacity: 0; }
       #cd5_328 .m328_box:hover .m328_boxbottom2 {  opacity: 0; }
       #cd5_328 .m328_leftbox1:hover .m328_boxbottom2, #cd5_328 .m328_leftbox2:hover .m328_boxbottom2, #cd5_328 .m328_leftbox3:hover .m328_boxbottom2 {  opacity: 0;}
       #cd5_328 .m328_leftbox1:hover .m328_boxbottom1, #cd5_328 .m328_leftbox2:hover .m328_boxbottom1, #cd5_328 .m328_leftbox3:hover .m328_boxbottom1 {  opacity: 1;}
       #cd5_328 .m328_leftbox1:hover .m328_boxbottom1_image, #cd5_328 .m328_leftbox2:hover .m328_boxbottom1_image, #cd5_328 .m328_leftbox3:hover .m328_boxbottom1_image {  opacity: 0;}
       #cd5_328 .m328_leftbox1:hover .m328_img, #cd5_328 .m328_leftbox2:hover .m328_img, #cd5_328 .m328_leftbox3:hover .m328_img {  opacity: 1; background-color: rgba(53,53,50,0); border: 0px; }
       #cd5_328 .m328_leftbox:hover { min-height: 165px; height: auto; flex: 1;  }
       #cd5_328 .m328_box:hover .m328_img {  opacity: 1; }
}
@media only screen and (max-width:840px) {
       #foot-bar { z-index: 1!important; }
       #cd5_328 .m328_box { height: calc(100vh - 60px);}
}
@media only screen and (max-height:500px) {
       #cd5_328 .m328_box { flex-direction: row; }
       #cd5_328 .m328_leftbox { min-height: 100px; height: auto; flex: 1; }
       #cd5_328 .m328_leftbox { min-height: auto; height: auto; max-height: 100%; }
       #cd5_328 .m328_leftbox:hover { min-height: 100px;}
       #cd5_328 .m328_boxbottom1 { bottom: 12%; opacity: 1; width: 160px; margin: auto; }
       #cd5_328 .m328_img { max-width: 140px; }
       #cd5_328 .m328_leftbox1:hover .m328_boxbottom2, #cd5_328 .m328_leftbox2:hover .m328_boxbottom2, #cd5_328 .m328_leftbox3:hover .m328_boxbottom2 {  opacity: 0;}
       #cd5_328 .m328_leftbox1:hover .m328_boxbottom1, #cd5_328 .m328_leftbox2:hover .m328_boxbottom1, #cd5_328 .m328_leftbox3:hover .m328_boxbottom1 {  opacity: 1;}
}