#mchalSlider {width: 100%; height: 400px; float: left; overflow: hidden; position: relative; display: flex;}
#mchalSlider .slide {width: 100%; height: 100%; float: left; position: absolute; top: 0px; left: 0px; display: flex; background-size: cover;}
#mchalSlider .slide .mainFrame {height: 100%; display: flex; position: relative;}
#mchalSlider .slide .imageFrame {width: 50%; height: 100%; float: left; display: flex; align-items: center; position: absolute; top: 0px; left: -1000px;}
#mchalSlider .slide .imageFrame IMG {max-width: 100%;}
#mchalSlider .slide .textFrame {width: 50%; height: 100%; float: left; display: flex; align-items: center; position: absolute; top: 0px; right: -1000px;}
#mchalSlider .slide .textFrame .inner {width: 100%; padding: 0px 30px;}
#mchalSlider .slide .textFrame .inner H2 {font-size: 35px; font-weight: 700; margin: 0px 0px 10px 0px;}
#mchalSlider .slide .textFrame .inner P {font-size: 16px; font-weight: 500; margin: 0px 0px 10px 0px;}
#mchalSlider .slide .textFrame .inner .button {width: auto; float: left; display: block; padding: 10px 30px; border: 2px #d6d6d6 solid; font-size: 15px; color: #1796e2; margin: 10px 0px 0px 0px;}
#mchalSlider #mchalSliderDots {width: 100%; float: left; position: absolute; bottom: 20px; left: 0px; display: flex; justify-content: space-around;}
#mchalSlider #mchalSliderDots .dot {width: 10px; height: 10px; display: block; float: left; background-color: #ddd; border: 2px #ccc solid; border-radius: 50%; margin: 0px 2px; opacity: 0.75;}
#mchalSlider #mchalSliderDots .dot.active {background-color: red;}
#mchalSlider #mchalSliderDots .dot:HOVER {opacity: 1;}

/* --------------------- TABLET --------------------- */
@media only screen
and (max-width: 1200px)
{
  #mchalSlider {height: auto; min-height: 420px;}
  #mchalSlider .slide .imageFrame {width: 100%; height: 200px;}
  #mchalSlider .slide .textFrame {width: 100%; height: auto; margin-top: 200px;}
  #mchalSlider .slide .textFrame .inner {display: flex; flex-wrap: wrap; justify-content: space-around;}
  #mchalSlider .slide .textFrame .inner H2 {font-size: 25px; text-align: center;}
  #mchalSlider .slide .textFrame .inner P {font-size: 14px; text-align: center;}
  
}