/* Main Tags */
* { box-sizing: border-box;}
body {  padding-bottom: 75px; }
body,p,div,td,th,ul,li,ol,a { font-family: 'Open Sans',Roboto,Calibri,sans-serif; }
p,div,li { line-height: 26px }
h1,h2,h3,h4,h5,h6 { font-family: Lato,'Open Sans',Roboto,Calibri,sans-serif;/*font-weight: bold;*/}

/* Carousel */
.carousel-inner>.item { height: 400px !important; overflow: hidden !important; }
.carousel-inner>.item>img { width: 100%; height: 400px !important; object-fit: cover !important;}
.carousel-caption { right: 0 !important; left: 0 !important; bottom: 0 !important; background: rgb(0, 0, 0);background: rgba(0, 0, 0, 0.5); padding-top: 0 !important; padding-bottom: 10px !important }
.carousel-caption>p { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.carousel-caption>h3  { margin-top: 0 !important; padding-top: 10px !important; }
.carousel-indicators { top: 10px !important }
.carousel-indicators li, .carousel-indicators li.active  { margin: 0 2px !important; }

/* Structure */
.container-fluid { padding-right: 15px; padding-left: 0 !important; margin-right: 0 !important; margin-left: 0 !important; }
.wrapper { max-width: 1088px; margin: 0 auto; padding: 0 10px; }
.fright { float: right; }
.hide-desktop { display:none }
footer { position: fixed; left: 0; right: 0; bottom: 0; font-size: 12px; }
/*.page-content { min-height: 60vh; }*/
#bmover { display: none;position: fixed;bottom: 10px;right: 30px;z-index: 99;border: none;outline: none;background-color: #279f47;color: white;cursor: pointer;padding: 15px 18px;border-radius: 10px;font-size: 18px;}
#bmover:hover { background-color: #555; }  
#waiter { position: fixed; top: 48%; left: 48%; z-index: 99; border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%; width: 80px; height: 80px; animation: spin 2s linear infinite;}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Text contents */
.top { margin-top: 0; padding-top: 0 }
.right, .r2l {text-align: right }
.ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.page-content h2, .page-list h2 { border-bottom: solid 1px #cecece; padding-bottom: 8px; margin-bottom: 16px }
.page-author { font-style: italic; padding: 20px 0; border-top: solid 1px #cecece; }
.cursor { cursor:pointer; }
.hi-cursor:hover { color: green; }

/* Top Menus */
.navbar-brand:hover, li.dropdown:hover, .navbar-nav>li:hover { background-color: #ddd !important; color: black !important }
.nav>li>a { padding: 15px 10px !important}

/* Home page */
.jumbotron { padding-top: 50px; min-height: 210px; background: transparent url(/ibbr/img/backgrounds/greenwave03.jpg) left 50px no-repeat; background-size: 100% 210px; background-attachment: fixed; margin-bottom: 20px !important; filter:drop-shadow(0 1px 8px gray);}
.tab-header, .tab-header td, .tab-header tr { border: transparent !important }
.top-title { font-family: Roboto, sans-serif; color: #a8eba7; font-weight: bold; letter-spacing: 2px; font-weight: bold; text-shadow:-1px -1px 0 green, 1px -1px 0 green,-1px 1px 0 green,1px 1px 0 green, 1px 2px 10px #000; }
.subtop-title { font-family: Roboto, sans-serif; font-weight: bold !important; color: #777; text-shadow: 1px 2px 3px #fff, 1px 2px 16px #fff;}
.istroke { font-weight: bold; text-shadow:-1px -1px 0 #000, 1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000; }
.search-container { float: right; }   
.search-container input[type=text] { padding: 6px; margin-top: 8px; font-size: 14px; border: solid 1px #cecece; border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.search-container button { float: right; padding: 6px 10px; margin-top: 8px; background: #a8eba7; font-size: 14px; border: solid 1px #cecece; border-top-right-radius: 8px; border-bottom-radius-radius: 8px; cursor: pointer; }
.search-container button:hover { background: #ccc; }

.home-box-contents h3, .more a {font-weight: bold}
.topvideopanel { background: rgba(0, 0, 0, 0.5); color: #f1f1f1; padding: 10px; position: absolute; bottom: 0; left: 0; right: 0; }
.video-box {position: relative; height: 32vh; min-height: 300px; padding: 0 !important; overflow: hidden; background-color: black}
.video-canvas { border:0; padding: 0; margin:0; width: 100%; height: 100% }
.video-youtube { border:0; padding: 0; margin:0; width: 100%; height: 88%; object-fit: cover }
.img-canvas { display: block; width: 100%; height: 170px; oveflow: hidden }
.img-canvas>img { width: 100%; height: 100%; object-fit: cover }

/* Boxes */
.home-box { padding: 0 8px 8px; margin-bottom: 26px; border: solid 1px #cecece; border-radius: 8px; -webkit-border-radius: 8px; }
.home-box ul.home-slides { display: block; width: 90%; }
ul.home-slides li { line-height: 18px !important; margin-top: 6px; margin-bottom: 6px }
.large-box { min-height: 160px; position: relative;}
.home-box img.mini-logo { display: none; float: right; width: 50px; margin: -5px 0 10px 10px; }
.home-box h3 { font-size: 16px; line-height: auto !important; margin-left: 10px; padding-left: 2px }
.home-box p { padding: 0; margin: 0; font-size: 13px; margin-left: 10px; }
.home-box .thumb-box { float: left; cursor: pointer; width: 80px; height: 80px;  overflow: hidden; position: relative; margin: 4px 10px 4px 10px; border: outline 1px #ddd; border-radius: 4px; -webkit-border-radius: 4px; background-color: #cecece; text-align: center;}
.home-box .thumb-box img.thumb { position: absolute; left:0; top: 0; height: 80px;}
.home-box li { list-style-type: none;}
.home-box ul { margin-left: 10px; padding-left: 10px;}
.home-box ul li ul { margin-left: 6px; padding-left: 6px }
.home-box a, .home-box a:visited, .home-box a:link  { display: block; padding: 3px 0; color: #7a7a7a; text-decoration:none;font-size: 14px; }
.home-box a:hover { color: green !important; }
.home-box-contents { height: 166px; overflow: hidden; margin-bottom: 28px; overflow:show; text-overflow:clip;}
.home-box-contents h3 {
  height: 44px;
  display: -webkit-box; 
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;     
  -o-text-overflow: ellipsis; 
  margin-bottom: 12px; padding: 0;
}
.home-box-contents p.ellipse {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;  
  height: 88px;
  line-height: 22px !important;
  overflow: hidden;
  text-overflow: ellipsis;     
  -o-text-overflow: ellipsis;   
}
.home-box .more { position: absolute; bottom:8px; right:10px; }
.home-box a.img-box { text-decoration: none; text-align: center; display: block; height: 163px; overflow: hidden;}
.home-box a.img-box img { margin: auto auto; width: 200%; margin-left: -50%; margin-top: -50%}
.home-head { margin: 8px; padding: 5px 8px 8px; }
.home-head h2 { font-size: 18px; color: #279f47; }
.home-head:hover>h2 { color: #32d95e !important; }

/* Breadcrumb */
ul.breadcrumb { padding: 0 16px 10px 0; list-style: none; margin-bottom: 20px; background-color: transparent; }
ul.breadcrumb li { display: inline; }
ul.breadcrumb li+li:before { padding: 8px; color: black; content: " | "; }
ul.breadcrumb li a { color: #0275d8; text-decoration: none; }
ul.breadcrumb li a:hover { color: #01447e; text-decoration: underline; }  

/* Buttons */  
.button { background-color: #f9f9f9; border: none; color: black; padding: 8px 20px 8px 16px; text-align: center; text-decoration: none; display: inline-block; margin: 0 2px; cursor: pointer; border-radius: 8px; }
.button-icon { background-color: #f9f9f9; border: none; color: black; padding: 6px 11px; text-align: center; text-decoration: none; display: inline-block; margin: 2px 2px; cursor: pointer; border-radius: 8px; }
.button:hover, .button-icon:hover {background-color: #ddd}
.btn-list { color: #777 !important; text-align: left !important; background-color: #f9f9f9; border: solid 1px #ddd; padding-top: 8px; padding-bottom: 8px  }

/* Lists */
.media-list-img { width: 100px; height: 120px; object-fit: cover; background-color: #f9f9f9; border-radius: 6px; border: solid 1px #ddd }
.media-focus { width: 100px; height: 120px; }

/* Side Widget Menus */
.widget, #fix-menu, .row>.col-sm-3 { position: sticky; position: -webkit-sticky; top: 56px; }
.widget h3, .widget h4 { padding: 10px 0; margin: 0; cursor: auto !important; background-image: none !important; }
.widget .list-group { max-height: 26vh; overflow: auto }
.widget .list-group-item { font-size: 13px; padding: 6px 20px 6px 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/* Scroll Bars */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1;}
::-webkit-scrollbar-thumb { background: #ccc; }
::-webkit-scrollbar-thumb:hover { background: #888; }

/* Popup images */
.i-box { background-color: #f9f9f9 !important; border: solid 1px #ddd !important; padding: 0 !important; box-shadow:none; -webkit-box-shadow: none; border-radius: 5px }
.i-box img { border-radius: 5px; cursor: pointer; border: none !important; transition: 0.3s; width: 100% }
.i-box img:hover {opacity: 0.7;}
.i-box>p { padding: 6px !important; line-height: 22px !important; font-size: 12px !important; font-weight: normal !important}
.i-left { float: left; margin: 0 20px 20px 0; }
.i-right { float: right; margin: 0 0 20px 20px; }
.i-right-box { float: right; margin: 0 0 20px 20px; }
.i-left-box { float: left; margin: 0 20px 20px 0; }
.i-center-box { margin: 20px auto; }

/* Portraits */
.img-portrait { width: 140px; height: 170px; margin-top: 10px }
.img-portrait img { width: 140px; height: 170px; object-fit: cover }

/* Videos */
#video-list h4 { width: 100%; display: inline-block; white-space: normal; overflow: visible; text-overflow: none; }
#video-list p { display: inline-block; white-space: normal; overflow: visible; text-overflow: none; }
#video-list p.video-conts { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; height: 9.0em; line-height: 1.5em; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; }
#video-list p.video-link { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100% }
.video-canvas { position: relative; display: inline-block; width: 100%; max-height: 216px; border-radius: 5px; -webkit-border-radius: 5px; }

/* Popup box (modal) */
.modal { display: none; position: fixed;z-index: 1040;padding-top: 100px;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.9); }
.modal-pale { background-color: rgb(90,90,90) !important;background-color: rgba(90,90,90,0.7) !important; }
.modal-content { margin: auto;display: block; width: 100%;max-width: 1000px; }
#img-caption { margin: auto; display: block; width: 100%;max-width: 800px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; }
.modal-content, #img-caption {  animation-name: zoom; animation-duration: 0.6s;}
@keyframes zoom { from {transform:scale(0)}  to {transform:scale(1)} }
.close { position: absolute;top: 15px;right: 35px; color: #fff !important; font-size: 50px;font-weight: bold;transition: 0.3s; cursor: pointer;}
.close:hover,.close:focus { color: #fff;text-decoration: none;}

/* Buttons */
.white-icons { /*color:#f9f9f9; text-shadow: 1px 1px 6px #000, -1px -1px 6px #000*/ }
.prev,.next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; text-decoration: none !important; background-color: rgba(50, 50, 50, 0.2); text-shadow: 2px 2px 6px #000, -2px -2px 6px #000, -2px 2px 6px #000, 2px -2px 6px #000 }
.next { right: 0; border-radius: 3px 0 0 3px;}
.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); color: white !important}

/* Select */
.group-select { margin-bottom: 20px}
.group-select select:first-child { border-top-left-radius: 6px; border-top-right-radius: 6px; border-top: solid 1px #ddd; }
.group-select select:last-child { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.group-select select { border-bottom: solid 1px #ddd; border-left: solid 1px #ddd; border-right: solid 1px #ddd; border-top: none;}
.full { cursor: pointer; width: 100%; padding: 10px; font-size: 13px;}
.full-round { border-radius: 6px; border: solid 1px #ddd}

/* Icons */
.icon-right { display: block; float: right; padding-top: 6px; padding-right: 0px; margin-right: -16px }
.icon-search { background-image: url(https://www.w3schools.com/css/searchicon.png);background-size: 14px 14px;background-position: 8px center;background-repeat:no-repeat;padding-left: 38px}

/* Multiline-ellipsis */
.multiline-ellipsis-3 { overflow: hidden; position: relative; line-height: 1.4em; max-height: 4.2em; text-align: justify; margin-right: -1em; padding-right: 1em; }
.multiline-ellipsis-3:before { content: '...'; position: absolute; right: 0; bottom: 0; }
.multiline-ellipsis-3:after { content: ''; position: absolute; right: 0; width: 1em; height: 1em; margin-top: 0.2em; background: white; }
.multiline-ellipsis-5 { overflow: hidden; position: relative; line-height: 1.4em; max-height: 7.0em; text-align: justify; margin-right: -1em; padding-right: 1em; }
.multiline-ellipsis-5:before { content: '...'; position: absolute; right: 0; bottom: 0; }
.multiline-ellipsis-5:after { content: ''; position: absolute; right: 0; width: 1em; height: 1em; margin-top: 0.2em; background: white; }

/* Google Results */
.gsc-webResult .gsc-result { padding: 10px 10px 10px 10px !important; background-color: #f9f9f9; line-height: inherit; margin-bottom: 5px !important; border-radius: 8px; border: solid 1px #ddd !important; }
.gsc-cursor-page { padding: 6px 8px !important; text-decoration: none; display: inline-block; text-align: center; background-color: #f5f5f5; color: #777; text-shadow: 1px 1px 2px #bbb; border-radius: 4px; border: solid 1px #ddd; }
.gs-result .gs-title, .gs-result .gs-title * { line-height: 18px !important; }

@media screen and (min-width: 768px) and (max-width: 855px) {
  .dropdown-hide {display:none}
  .nav>li>a { padding: 15px 6px !important}
}
@media screen and (max-width: 767px) {
  body { padding-bottom: 0; overflow-x: hidden }
  .hide-desktop { display:inline-block }
  .nav>li>a { padding: 8px 15px !important; border-bottom: solid 1px #ddd}
  .dropdown-menu>li:hover {background-color: #f9f9f9}
  .dropdown-toggle>.caret {display: inline-block; float: right; margin-top: 8px}
  #bmover { bottom: 10px;right: 10px;padding: 10px 12px;border-radius: 10px;font-size: 14px;}
  .r2l { text-align: left }
  .home-head { padding: 0; margin-top: 10px}
  .home-head>h2 { margin-top: 0 }
  .home-box {margin-bottom: 10px}
  .home-box-content h3, .home-box-contents p.ellipse { height: auto; }
  .widget .list-group { max-height: 100vh !important; height: auto !important }

  .dropdown-hide {display:none}
  .top-title { font-size: 24px }
  .subtop-title { font-size: 18px !important }
  .carousel-inner>.item { height: 250px }
  .r2l { text-align: left }
  footer {position: relative; }
}
@media screen and (max-width: 480px) {
  .top-title { font-size: 20px }
  .subtop-title { font-size: 16px !important }
}