@media only screen and (min-width: 768px) and (max-width: 991px) {
  .ui.container {
    width: 723px;
  }

  .ui.grid.container {
    width: calc( 723px  +  2rem ) !important;
  }

  .ui.relaxed.grid.container {
    width: calc( 723px  +  3rem ) !important;
  }

  .ui.very.relaxed.grid.container {
    width: calc( 723px  +  5rem ) !important;
  }
}

.ui.menu {
    border-radius: 0;
    box-shadow: none;
    & .menu {
      border-bottom: none;
    }
  }
  .megamenu {
    background-color:  #efefef;
    position: absolute;
    left: 0;
    right: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    display: none;
    margin-top: 0;
    width: 100%;
  
    .mega-dropdown:hover > & {
      display: block;
    }
  }
  


  main{
    background: #b8e1dd;
    border: 2px solid white; /* red;  */
  /*  border-radius: 50px 20px;   for rounded corners */
    padding: 0.8rem; 
    height: 100%;
   /* max-height: 780px; */
    overflow: hidden;

  }

  #frameIt{


    background: white; /* #b8e1dd; */
    padding: 1rem;
    border: 1px;
    display:none;
    height: 100%;
    height: 300rem;   /* 7 march */
    overflow: auto;
    widows: 98%;
  }



  #contentMain{
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }


#menu.selected{
  background: blue; /* #b8e1dd; */

}

/*

.menu:hover {
  text-decoration: underline;
}
*/

.menu:hover > a:after {
  opacity: .15;
  transform: scalex(1);
}

#menu .active { background-color: #f4f3f1 /* #b8e1dd */ ; text-decoration: none;}
/* to override the existing css for "a" tag */
#menu .active a{ 
  color: #fff; 
  background-color: #b8e1dd

}

body {
    margin: 0;
    font-family: Avenir-book, Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";   
}
  
h5 {
  text-decoration: none;
  color:  rgba(0,0,0,.6);/* rgba(0,0,0,.4);*/
  font-size: 1.2rem;
  font-family: Avenir-book, Arial, Helvetica, sans-serif;
  font-weight: normal;
/*  z-index: 1;*/
}

/*

.ui.popup{
  
  overflow:auto;
}
.ui.popup{overflow:auto;}
*/

@media screen and (min-width:768px) {
  .jumbotron {
      padding-top: 48px;
      padding-bottom: 48px
  }



  
  @media (min-width:768px) {
    .megamenu {
        float: left;
        margin: 0
    }
    .megamenu>li {
        float: left
    }
    .megamenu>li>a {
        padding-top: 15px;
        padding-bottom: 15px
    }
  }

  @media (min-width:768px) {
    .megamenu-toggle {
        display: none
    }
  }
  
  .megamenu {
    margin: 7.5px -15px
  }
  
  .megamenu>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px
  }

  
@media (min-width:768px) {
  .megamenu>.container .megamenu-brand,
  .megamenu>.container-fluid .megamenu-brand {
      margin-left: -15px
  }
}



@media (min-width:768px) {
  .container-fluid>.megamenu-collapse,
  .container-fluid>.megamenu-header,
  .container>.megamenu-collapse,
  .container>.megamenu-header {
      margin-right: 0;
      margin-left: 0
  }
}

.megamenu-static-top, 
.megamenu{
  z-index: 1000;
  border-width: 0 0 1px
}

@media (min-width:768px) {
  .megamenu-static-top,
  .megamenu{
      border-radius: 0
  }
}


@media (max-device-width:480px) and (orientation:landscape) {
 .megamenu {
      max-height: 200px
  }
}

.container-fluid>.megamenu-collapse,
.container-fluid>.megamenu-header,
.container>.megamenu-collapse,
.container>.megamenu-header,
.container>.pointing  {
  margin-right: -15px;
  margin-left: -15px
}



@media (min-width:768px) {
  .megamenu-collapse {
      width: auto;
      border-top: 0;
      -webkit-box-shadow: none;
      box-shadow: none
  }
  .megamenu-collapse.collapse {
      display: block!important;
      height: auto!important;
      padding-bottom: 0;
      overflow: visible!important
  }
  .megamenu-collapse.in {
      overflow-y: visible
  }
  .megamenu-fixed-bottom .megamenu-collapse,
  .megamenu-fixed-top .megamenu-collapse,
  .megamenu-static-top .megamenu-collapse {
      padding-right: 0;
      padding-left: 0
  }
}

.megamenu-fixed-bottom .megamenu-collapse,
.megamenu-fixed-top .megamenu-collapse {
  max-height: 340px
}



@media (min-width:768px) {
  .megamenu .megamenu {
      border-radius: 4px
  }
}

@media (min-width:768px) {
  .megamenu-header {
      float: left
  }
}


@media (min-width:768px) {
  .megamenu>li>a,
  .nav-tabs-justified>li>a {
      border-bottom: 1px solid #ddd;
      border-radius: 4px 4px 0 0
  }
  .megamenu>.active>a,,
  .megamenu-justified>.active>a,
  .megamenu-justified>.active>a:focus,
  .megamenu-justified>.active>a:hover 
  .nav-tabs-justified>.active>a,
  .nav-tabs-justified>.active>a:focus,
  .nav-tabs-justified>.active>a:hover {
      border-bottom-color: #fff
  }
}


@media (min-width:768px) {
 .megamenu
  .nav-justified>li {
      display: table-cell;
      width: 1%
  }
  .megamenu
  .nav-justified>li>a {
      margin-bottom: 0
  }
}

*/





/*

.menu {
    list-style: none;
}
.menu li {
    float: left;
    margin-right: 1em;
}
.popup {
    background-color: #fff;
    position: absolute;
    border-radius: 5px;
    border: 1px solid grey;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    padding: 1em;
}

.item:hover~div {
    opacity: 1;
} */