/* Main Tags */
* { box-sizing: border-box;}
body { overflow-x: hidden; padding: 0 !important; margin: 0 !important }
body,p,div,td,th,ul,li,ol,a { font-family: 'Open Sans',Roboto,Calibri,sans-serif; }
p a, p a:visited, div>a, div>a:visited, li a, li a:visited { color: #28a745 }

/* Header */
#main-logo {width: 160px}
.jumbotron { padding: 2rem 1rem }

.gsc-control-cse, .gsc-control-cse .gsc-table-result { width: auto; font-family: 'Open Sans',Roboto,Calibri,sans-serif; font-size: 1.0rem !important;}
.gs-webResult.gs-result { padding: 3px 6px; border: solid 1px #fff; border-radius: 5px }
.gs-webResult.gs-result:hover { background-color: #f8f9fa !important; border: solid 1px orange}
.gsc-control-cse .gs-spelling, .gsc-control-cse .gs-result .gs-title, .gsc-control-cse .gs-result .gs-title * { font-size: 1.2rem !important; }
.gs-web-image-box, .gs-promotion-image-box { display: none !important; }
.atss { z-index: 120 !important; }

.accordion a.list-group-item { font-size: 0.9rem !important; }

.home-block img { width: 140px }
.media.personal-page>img { width: 180px }
/*#vbar { z-index: 3001: }*/
@media screen and (max-width: 768px) {
  #main-logo { width: 25vw}
  .jumbotron { padding: 1.5rem 0.5rem }
  .hide-md { display: none; }
  .atss { z-index: 2999 !important; }

}
@media screen and (max-width: 576px) {
  .jumbotron { padding: 1rem 0.3rem }
  .navbar { padding: 0 0 !important }
  .breadcrumb { 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .home-block { flex-direction: column !important; } 
  .home-block img {
    display: block;
    width: 100% !important;
    margin-bottom: 20px;
  }
  .list-group-item-action>.media {
    flex-direction: column !important; 
    width: 100%;
  }
  .list-group-item-action>.media>.media-left {
    width: 100%; height: auto !important;
  }
  .list-group-item-action>.media>img, .list-group-item-action>.media>.media-left>img {
    display: block;
    width: 100% !important; height: auto !important; max-height: 320px;
    margin-bottom: 20px; margin-right: 0 !important;
    object-fit: cover !important;
  }
  .media.personal-page {
    flex-direction: column !important; 
  }
  .media.personal-page>img {
    display: block;
    width: 100% !important; height: auto !important;
    margin: 0 auto !important; 
    object-fit: cover !important;
  }
}

/* Side Widget Menus */
.widget h3, .widget h4 { padding: 10px 0; margin: 0; cursor: auto !important; background-image: none !important; }
.widget div.list-group { max-height: 28vh; overflow: auto; border-bottom: 1px solid #ddd !important; }
.widget .list-group-item { font-size: 14px; padding: 6px 20px 6px 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.widget .custom-select-sm { font-size: .925rem !important; border-bottom: 1px solid #ddd !important; border-radius: 0px !important} 

#fix-menu { position: sticky; position: -webkit-sticky; top: 70px; background-color: white}
.fix-menu-container { width: 100% }
@media screen and (max-width: 768px) {
  #fix-menu { z-index: 3001 !important; position: fixed; right: 0;top: 0;bottom:0;width: 0;min-height: 100%;max-height: none; transition: 0.5s;padding-bottom: 60px;background-color: #f8f9fa; }
  .fix-menu-container {padding: 40px 20px }
}

/* Lateral Menu */
#layered { z-index: 3000 !important; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.4);  }
.overlay { z-index: 3001 !important; position: fixed; right: 0;top: 0;bottom:0;width: 0;min-height: 100%;max-height: none; transition: 0.5s;padding-bottom: 60px;background-color: #f8f9fa;}
.overlay .list-group-item { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 8px 10px }
.overlay-content { top: 2%;width: 100%;text-align: left;margin-top: 50px; margin-bottom: 20px; padding: 0 20px; }
.overlay-content h3 { font-size: 20px; color: #595959; text-align: left !important }
.overlay .closebtn { display: block; color: #545454 !important; text-decoration: none; }

#bmover { display: none;position: fixed;bottom: 10px;right: 30px; 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%; 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); } }



/* Page */
#full-page { min-height: 65vh }

/* Carousel */
.carousel-inner>.carousel-item { height: 400px !important; overflow: hidden !important; }
.carousel-inner>.carousel-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 */
.wrapper { max-width: 1388px; margin: 0 auto; padding: 0 10px; }
.fright { float: right; }
.hide-desktop { display:none }

/* Text contents */
.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 */
.flag, .flag-it, .flag-en { display: inline-block; min-width: 16px; background-size: 16px 16px;}
.flag-it { background: transparent url(/img/gadgets/flagita.png) center center no-repeat !important; }
.flag-en { background: transparent url(/img/gadgets/flaguk.png) center center no-repeat !important; }

/* Home page */
.top-title { /*font-family: Roboto, sans-serif;*/ color: #fff; 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: #eee;}
.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; */}

/* Breadcrumb */
.breadcrumb { background-color: #fff; margin-bottom: 20px; padding-left: 0 !important; margin-left: 0 !important; font-weight: bold }
.breadcrumb a, .breadcrumb:visited {font-weight:bold }
.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; }


/* 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 15px 20px; }
.i-left-box { float: left; margin: 0 20px 15px 0; }
.i-center-box { margin: 20px auto; }
@media screen and (max-width: 768px) {
  .i-box { display: block }
  .i-left, .i-right, .i-right-box,.i-left-box,.i-center-box { float: none; margin: 0 auto 20px; width: 100% !important }
}

/* 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: 98%; max-width: 1400px; }
#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; }

@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: 30px; 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: 45px;right: 10px;padding: 10px 12px;border-radius: 10px;font-size: 14px; }
  .widget div.list-group { max-height: auto !important; height: auto !important }

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