@font-face {
  font-family: "Antonio-Regular";
  src: url("../fonts/Antonio-Regular.eot"); /* IE9 Compat Modes */
  src: url("../fonts/Antonio-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/Antonio-Regular.otf") format("opentype"), /* Open Type Font */
    url("../fonts/Antonio-Regular.svg") format("svg"), /* Legacy iOS */
    url("../fonts/Antonio-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/Antonio-Regular.woff") format("woff"), /* Modern Browsers */
    url("../fonts/Antonio-Regular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
    .menu-toggle{ color: #fff; float: left; line-height: 50px; font-size: 20px; cursor: pointer; display: none; }  
    header { position: absolute; top:0; left:0; padding:0 30px; width:100%; box-sizing: border-box; }
    header nav { float: left; }
    header nav ul{ margin-top: 8px; padding: 0; display:flex; display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
                    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
                    display: -ms-flexbox;      /* TWEENER - IE 10 */
                    display: -webkit-flex;     /* NEW - Chrome */
                    display:flex; }
    header nav ul li{ list-style: none; margin-left: 5px; margin-right: 5px; }
    header nav ul li a { height: 50px; line-height: 50px; padding: 0 20px; color: #fff; text-decoration: none; display: block; font-size: 20px; }
    header nav ul li a:hover,
    header nav ul li a.active { color: #fff; background: #231F20; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
    h2.modify {font-size: 4.5em;}
    p.modify1{text-decoration:  underline; font-size: 1.2em; }
    p.modify2{font-size: 1.2em;}
    #content{ margin-top: 60px;}
    #content::after{content: " "; display: block; clear: both;}
    #left-panel{ width:35%;  float: left; color:  #fff;  text-align: left; margin-left: 25px;  line-height: 35px;}
    #navbar{height: 500px; margin-left: 25px;}
    #news{background-color: #123234; height: auto; margin-top: 15px; opacity:0;  }
    #middle{float: left; margin: 0 auto; padding-left: 60px;  }
    
    #right-section{ height: 65px; width:17%; float: right; }
    #footer{ margin-top: 50px; margin-bottom: 1px; padding-left: 20px; vertical-align:  bottom; }
    .fa { padding: 1px; font-size: 30px; width: 30px; text-align: center; text-decoration: none; margin: 5px 2px; border-radius: 50%;}
    .fa:hover { opacity: 0.7; }
    .fa-facebook { color: white;  }
    .fa-instagram {  color: white;}
    .fa-whatsapp {  color: white;}
    .fa-envelope {  color: white;}

    .ul1{  width: 31em;  /* room for 3 columns */ margin-top: -25px; padding: 0 1em; list-style: none; }
    .ul1 li { float: left; width: 11em;  /* accomodate the widest item */ }
    .ul1 li:before { content: ""; border-color: transparent #fff; border-style: solid; border-width: 0.3em 0 0.35em 0.45em; display: block; height: 0; width: 0; left: -1em; top: 1.2em;
                     position: relative; }
    /* stop the floating after the list */
    br {   clear: left; }
    /* separate the list from what follows it */
    div.facilities { margin-bottom: 1em; }
      
    .tablewrapper { position: relative; margin-left: 10px; color: #ffffff; }
    /*.table { display: table; width: 90%; }
    .row { display: table-row; }
    .cell {  display: table-cell;  border: 0px solid red; padding: 0.6em; text-align: right; }
    .cell.empty {  border: none;  width: 100px; }
    .cell.space{ padding :1.5em; }
    .cell.rowspanned { position: absolute; top: 0; bottom: 0; width: 100px; }
    .cell.line { border-bottom: 2px solid #ffffff; text-align: left; }*/

    .Table { display: table;  margin-top: 58px;  border-collapse:  collapse; }
    .Title { display: table-caption; text-align: center; font-weight: bold; font-size: larger; }
    .Heading { display:table-row; font-weight: normal; column-span:  all; height:43px;}
    .Row { display: table-row;  height:55px; }
    .Cell { display: table-cell;  width:6vw; padding-left: 0vw; border: 0px solid #fff; font-size: 14px;  }
    .Cella { display: table-cell;  width:12vw; padding-left: 0vw;  border: 0px solid #fff; font-size: 14px;  }
    .Cellb { display: table-cell;  width:9vw; padding-left: 2vw; border: 0px solid #fff; font-size: 14px;}
    .Cellc { display: table-cell;  width:9vw; padding-left: 1.6vw; border: 0px solid #fff; font-size: 14px;}
    .Celld { display: table-cell;  width:9vw; padding-left: 1.6vw; border: 0px solid #fff; font-size: 14px;}
    
    
@media(min-width:992px) and (max-width:1280px)
{    

    #middle{float: left; margin: 0 auto; padding-left: 35px;  }
    .tablewrapper { position: relative; margin-left: 1vw; color: #ffffff; }
    .Table { display: table;  margin-top: 54px;  border-collapse:  collapse; }
    .Title { display: table-caption; text-align: center; font-weight: bold; font-size: larger; }
    .Heading { display:table-row; font-weight: normal; column-span:  all; height:43px;}
    .Row { display: table-row;  height:55px; }
    .Cell { display: table-cell;  width:6vw; padding-left: 0vw; border: 0px solid #fff; font-size: 14px;  }
    .Cella { display: table-cell;  width:12vw; padding-left: 0.6vw;  border: 0px solid #fff; font-size: 14px;  }
    .Cellb { display: table-cell;  width:9vw; padding-left: 1.8vw; border: 0px solid #fff; font-size: 14px;}
    .Cellc { display: table-cell;  width:9vw; padding-left: 1.8vw; border: 0px solid #fff; font-size: 14px;}
    .Celld { display: table-cell;  width:11vw; padding-left: 1.5vw; border: 0px solid #fff; font-size: 14px;}
    
}    
    
@media(min-width:768px) and (max-width:1100px)
{ 
    
    h2.modify {font-size: 3.5em;}
    #middle{float: left; margin: 0 auto; padding-left: 30px;  }
    .tablewrapper { position: relative; margin-left: 1vw; color: #ffffff; }
    .Table { display: table;  margin-top: 54px;  border-collapse:  collapse; }
    .Title { display: table-caption; text-align: center; font-weight: bold; font-size: larger; }
    .Heading { display:table-row; font-weight: normal; column-span:  all; height:43px;}
    .Row { display: table-row;  height:55px; }
    .Cell { display: table-cell;  width:6vw; padding-left: 0vw; border: 0px solid #fff; font-size: 12px;  }
    .Cella { display: table-cell;  width:12vw; padding-left: 0.1vw;  border: 0px solid #fff; font-size: 12px;  }
    .Cellb { display: table-cell;  width:9vw; padding-left: 1.8vw; border: 0px solid #fff; font-size: 12px;}
    .Cellc { display: table-cell;  width:9vw; padding-left: 1.8vw; border: 0px solid #fff; font-size: 12px;}
    .Celld { display: table-cell;  width:11vw; padding-left: 1.5vw; border: 0px solid #fff; font-size: 12px;}
    
}  

@media(min-width:768px) and (max-width:991px)
{
   body { background-color: #545557; }
    .menu-toggle { display: block; font-size: 30px;}
    
    header { padding:0 10px; background-color: #333;  }
    header nav {     position: absolute; width: 100%; height: calc(100vh-50px); background: #333; top: 50px; left: -100%; transition: 0.5s;  }
    header nav.active { left: 0;  }
    header nav ul{ display: block; text-align: center;   }
    
    header nav ul li a {         border-bottom: 1px solid rgba(0, 0, 0, .2); font-size: 30px;}
    header nav ul li a:hover,
    header nav ul li a.active { border-radius: 0; background:  #999999; }
    
    h2.modify {font-size: 3.5em; text-align: center;}
    p.modify1{text-decoration:  underline; font-size: 1.8em; text-align: center; }
    p.modify2{font-size: 1.8em; text-align: center;}
    .mess{font-size: 1.8em; text-align: center;}
    #content{ margin-top: 60px;}
    #content::after{content: " "; display: block; clear: both;}
    #left-panel{ width:100%;  float: left; color:  #fff;  text-align: left; margin-left: 5px;  line-height: 45px; border: 0px solid #fff;}
    #navbar{height: 600px; margin-left: 5px;}
    #news{background-color: #123234; height: auto; margin-top: 15px; opacity:0;  }
    #middle{float: left; margin: 0 auto;  border: 0px solid #fff;  }
    
    #right-section{ height: 65px; width:17%; float: right; }
    #footer{ margin-top: 50px; margin-bottom: 1px; padding-left: 20px; vertical-align:  bottom; font-size: 30px;}
    .fa { padding: 1px; font-size: 30px; width: 30px; text-align: center; text-decoration: none; margin: 5px 2px; border-radius: 50%;}
    .fa:hover { opacity: 0.7; }
    .fa-facebook { color: white;  }
    .fa-instagram {  color: white;}
    .fa-whatsapp {  color: white;}
    .fa-envelope {  color: white;}

    .ul1{  width: 31em;  /* room for 3 columns */ margin-top: -25px; padding: 0 1em; list-style: none; }
    .ul1 li { float: left; width: 11em;  /* accomodate the widest item */ }
    .ul1 li:before { content: ""; border-color: transparent #fff; border-style: solid; border-width: 0.3em 0 0.35em 0.45em; display: block; height: 0; width: 0; left: -1em; top: 1.2em;
                     position: relative; }
    /* stop the floating after the list */
    br {   clear: left; }
    /* separate the list from what follows it */
    div.facilities { margin-bottom: 1em; }
      
    .tablewrapper { position: relative; color: #ffffff; }
    /*.table { display: table; width: 90%; }
    .row { display: table-row; }
    .cell {  display: table-cell;  border: 0px solid red; padding: 0.6em; text-align: right; }
    .cell.empty {  border: none;  width: 100px; }
    .cell.space{ padding :1.5em; }
    .cell.rowspanned { position: absolute; top: 0; bottom: 0; width: 100px; }
    .cell.line { border-bottom: 2px solid #ffffff; text-align: left; }*/

    .Table { display: table;  margin-top: 8px;  border-collapse:  collapse; }
    .Title { display: table-caption; text-align: center; font-weight: bold; font-size: larger; }
    .Heading { display:table-row; font-weight: normal; column-span:  all; height:43px;}
    .Row { display: table-row;  height:14vh; border-top: 1px solid #fff; }
    .Cell { display: table-cell;  width:6vw; padding-left: 0vw; border: 0px solid #fff; font-size: 24px; height: 6vh;   }
    .Cella { display: table-cell;  width:15vw; padding-left: 3vw;  border: 0px solid #fff; font-size: 24px;  }
    .Cellb { display: table-cell;  width:15vw; padding-left: 3vw; border: 0px solid #fff; font-size: 24px;}
    .Cellc { display: table-cell;  width:15vw; padding-left: 8vw; border: 0px solid #fff; font-size: 24px;}
    .Celld { display: table-cell;  width:15vw; padding-left: 6vw; border: 0px solid #fff; font-size: 24px;}

   
   
}

@media(max-width:767px)
{
    body { background-color: #545557; }
    .menu-toggle { display: block; font-size: 30px;}
    
    header { padding:0 10px; background-color: #333;  }
    header nav {     position: absolute; width: 100%; height: calc(100vh-50px); background: #333; top: 50px; left: -100%; transition: 0.5s;  }
    header nav.active { left: 0;  }
    header nav ul{ display: block; text-align: center;   }
    
    header nav ul li a {         border-bottom: 1px solid rgba(0, 0, 0, .2); font-size: 30px;}
    header nav ul li a:hover,
    header nav ul li a.active { border-radius: 0; background:  #999999; }
    
    h2.modify {font-size: 3.5em; text-align: center;}
    p.modify1{text-decoration:  underline; font-size: 1.8em; text-align: center; }
    p.modify2{font-size: 1.8em; text-align: center;}
    .mess{font-size: 1.8em; text-align: center;}
    #content{ margin-top: 60px;}
    #content::after{content: " "; display: block; clear: both;}
    #left-panel{ width:100%;  float: left; color:  #fff;  text-align: left; margin-left: 5px;  line-height: 45px; border: 0px solid #fff;}
    #navbar{height: 600px; margin-left: 5px;}
    #news{background-color: #123234; height: auto; margin-top: 15px; opacity:0;  }
    #middle{float: left; margin: 0 auto;  border: 0px solid #fff;  }
    
    #right-section{ height: 65px; width:17%; float: right; }
    #footer{ margin-top: 50px; margin-bottom: 1px; padding-left: 20px; vertical-align:  bottom; font-size: 30px;}
    .fa { padding: 1px; font-size: 30px; width: 30px; text-align: center; text-decoration: none; margin: 5px 2px; border-radius: 50%;}
    .fa:hover { opacity: 0.7; }
    .fa-facebook { color: white;  }
    .fa-instagram {  color: white;}
    .fa-whatsapp {  color: white;}
    .fa-envelope {  color: white;}

    .ul1{  width: 31em;  /* room for 3 columns */ margin-top: -25px; padding: 0 1em; list-style: none; }
    .ul1 li { float: left; width: 11em;  /* accomodate the widest item */ }
    .ul1 li:before { content: ""; border-color: transparent #fff; border-style: solid; border-width: 0.3em 0 0.35em 0.45em; display: block; height: 0; width: 0; left: -1em; top: 1.2em;
                     position: relative; }
    /* stop the floating after the list */
    br {   clear: left; }
    /* separate the list from what follows it */
    div.facilities { margin-bottom: 1em; }
      
    .tablewrapper { position: relative; color: #ffffff; }
    /*.table { display: table; width: 90%; }
    .row { display: table-row; }
    .cell {  display: table-cell;  border: 0px solid red; padding: 0.6em; text-align: right; }
    .cell.empty {  border: none;  width: 100px; }
    .cell.space{ padding :1.5em; }
    .cell.rowspanned { position: absolute; top: 0; bottom: 0; width: 100px; }
    .cell.line { border-bottom: 2px solid #ffffff; text-align: left; }*/

    .Table { display: table;  margin-top: 8px;  border-collapse:  collapse; }
    .Title { display: table-caption; text-align: center; font-weight: bold; font-size: larger; }
    .Heading { display:table-row; font-weight: normal; column-span:  all; height:43px;}
    .Row { display: table-row;  height:14vh; border-top: 1px solid #fff; }
    .Cell { display: table-cell;  width:6vw; padding-left: 0vw; border: 0px solid #fff; font-size: 24px; height: 6vh;   }
    .Cella { display: table-cell;  width:15vw; padding-left: 3vw;  border: 0px solid #fff; font-size: 24px;  }
    .Cellb { display: table-cell;  width:15vw; padding-left: 3vw; border: 0px solid #fff; font-size: 24px;}
    .Cellc { display: table-cell;  width:15vw; padding-left: 8vw; border: 0px solid #fff; font-size: 24px;}
    .Celld { display: table-cell;  width:15vw; padding-left: 6vw; border: 0px solid #fff; font-size: 24px;}

}