/*
Theme Name: uBbOo Theme v2.x
Theme URI: http://abrazo-tango.fr
Description: A common theme for Abrazo Tango websites. Based on Bootstrap 4.5
Version: 2.17 - small bug in case of no related work solved
Author: Didier Rizzo aka uBbOo
This theme was built for Abrazo Tango main and annexe activities 
*/

/* ------------------------- global variable ------------------------- */

/* Bootstrap 4.5 navbar ------------------- main colors, could be personalized */
:root{
  --light-color: black;
  --light-background-color: white;
  --dark-color: white;
  --dark-background-color: black;
  --middle-color: grey;
}

:root{
  --navbar-admin-background-color: red;
  --navbar-color: #bbb;
  --navbar-background-color: rgba(240,240,240,0.9);
  --navbar-active-color: rgba(128,128,128,1);
  --navbar-active-background-color: rgba(255,255,255,1);
  --navbar-hover-color: white;
  --navbar-hover-background-color: black;
  --navbar-dropdown-color: #bbb;
  --navbar-dropdown-background-color: rgba(240,240,240,0.8);
  --navbar-dropdown-hover-color: rgba(222,222,222,1);
  --navbar-dropdown-hover-background-color: rgba(128,128,128,1);
  --navbar-dropdown-active-color: rgba(128,128,128,1);
  --navbar-dropdown-active-background-color: rgba(255,255,255,1);
}

/* ------------------- viewport width ------------------- */
@media (max-width: 1140px) {
  :root {
    --viewport-width: 100vw;
  }
}
@media (min-width: 1140px) {
  :root {
    --viewport-width: 1110px;
  }
}


html {
  position: relative;
  min-height: 100%;
}
.dark {
	background-color: var(--dark-background-color);
	color: var(--dark-color);
}
body {
  margin-bottom: 5vh;
}
p:empty {
	margin: 0px;
}
h1 {
  margin-top:40px !important;
}

.container-fluid {
	padding: 0px;
}

.ZOLD_container-fullwidth {
    overflow: hidden;
    width: 100%;
}
@media print {
  a[href]:after {
    content: none !important;
  }
}

@media (max-width: 768px) {
	body {
		font-size: 0.95em !important;
	}
}

/* Sticky footer styles
-------------------------------------------------- */
.sticky-footer {
  width: 100%;
  text-align: center;
}
.sticky-footer .social-footer a{
	padding: 0px 5px 0px 5px;	
}

/* right sidebar
-------------------------------------------------- */
.right_sidebar_col {
  background-color: var(--middle-color);
}

/* ------------------------- widget calendar ------------------------- */
.widget_calendar table {
    width: 100%;
}

/* ------------------------- widget Ubboo_lastposts_widget ------------------------- */
.widget.lastposts h2 {
    font-size: 1.5em;
}

/* 202006 to be checked... ------------------------- Nav and WPML language menu ------------------------- */

.wpml-ls-menu-item .wpml-ls-flag {
  display:inline;
  vertical-align: baseline;
  width:18px !important;
  height:12px !important;
}

/* layout for wpml language sub-menu with flags only */
.wpml-ls-menu-item .dropdown-menu {
	min-width: 50px;
	background-color: transparent;
}
.wpml-ls-item a img {
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: linear;
  transition-delay: 0s;
}
.wpml-ls-menu-item a:hover img {
  transform: scale(1.5);
  opacity: 0.6;
}
.wpml-ls-item li a {
	padding: 15px;
}

.menu-separator {
  border-width:0px; 
  border-style: solid;
  border-bottom: thin solid var(--middle-color);
}

.table-social a {
	padding: 0.35em;
}

@media (max-width: 768px) {
  .dropdown-menu {
	margin-left: 20px;
  }
  .menu-item-language-current .submenu-languages {
    position: absolute;
    top:10px;
	left:50px;
  }
  .submenu-languages li {
    display:inline-block;
  }  
}

/* -------------------------  navbar bootstrap 4.5 ------------------------- */
@media (max-width: 768px) {
  #navbar-mini {
		display: none !important;
  }
}

.navbar {  
  height: 66px;
  background-color: var(--navbar-background-color) !important;
  padding: 0px !important;
  font-size: 1.25rem;
  line-height: 66px;
}
#navbar-main {  
  z-index: 1029;
}
#navbar-mini {  
  z-index: 1028;
}
/* -------------------------  navbar with toggler */
.navbar-toggler,
.navbar-dark .navbar-toggler  {
	background-color: var(--navbar-active-color) !important;
	color: var(--navbar-active-background-color) !important;
} 
.navbar .container {
	padding-left: 0.5rem !important;
	padding-right: 0.5rem !important;
}  
.navbar {  
	height: auto !important;  
}

/* ------------------------- when wp admin bar on top => leave room for the bar ------------------------- */
body.customize-support #navbar-main { 
  background-color: var(--navbar-admin-background-color) !important;
}
body.customize-support #navbar-mini { 
  margin-top: 32px;
  background-color: var(--navbar-admin-background-color) !important;
}

.navbar a,
.navbar .navbar-brand {
  color: var(--navbar-color) !important;
  padding-top: 0px;
  padding-bottom: 0px;
}
.navbar .navbar-brand {
  margin-right: 0px !important;
}
.navbar .navbar-brand:hover,
.navbar .nav-link:hover,
.navbar .social-icon:hover {
  color: var(--navbar-hover-color) !important;
  background-color: var(--navbar-hover-background-color) !important;
}
.navbar .dropdown-item {
  color: var(--navbar-dropdown-color) !important;
  background-color: var(--navbar-dropdown-background-color) !important;
}
.navbar .dropdown-menu {
  margin: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  font-size: 1.25rem;
  border-width: 0px;
}
.navbar .dropdown-item:hover {
  color: var(--navbar-dropdown-color) !important;
  background-color: var(--navbar-dropdown-hover-background-color) !important;
}
.navbar .active > .nav-link {
  color: var(--navbar-active-color) !important;
  background-color: var(--navbar-active-background-color) !important;
}
.navbar .active > .dropdown-item {
  color: var(--navbar-dropdown-active-color) !important;
  background-color: var(--navbar-dropdown-active-background-color) !important;
}
.navbar .dropdown:hover .dropdown-menu {
  display: block;
}

/* Bootstrap 4 navbar ------------------- mini */
.navbar.navbar-mini-fixed-top{
  left: 0;
  position: fixed;
  top: 0;
  right: 0;  
  font-size: 0.75rem;
  height: 40px;
  line-height: 40px;
  min-height:40px;
}
.navbar.navbar-mini-fixed-top img{
    height: 40px;
	width: auto;
}
.navbar.navbar-mini-fixed-top .dropdown-menu {
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 0.75rem;
}

/* -----------------  pagination category ----------------- */
.pagination {
   justify-content: center;
   font-size: 2em;
}
.pagination .page-numbers{
   padding: 1em;
}
/* 202006 to be checked... ----------------- moto and jumbtron ----------------- */
.jumbotron-full {
  top: 10vh;
}
.moto {
  position: absolute;
  text-align:center;
  background-color: rgba(255, 255, 255, 0.25);
  font-size: 36px;
  right: 0%;
  top:5%;
  width: 30%;
  border-radius: 5px;
  z-index: 1000;   
  padding: 5px;
  color:#fff;
  font-weight:400;
  line-height:1;
}
.footer.template-jumbotron  {
  position:absolute !important;
  bottom:0px;
}

/* ------------------------- back to top button ------------------------- */
#back-to-top {
    background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0;
    border-radius: 5px;
    font-size:50px;
	bottom: 20px;
    display: none;
    padding: 5px;
    position: fixed;
    right: 20px;
    z-index: 999;
	line-height: 1;
}
/* TO BE CHECKED, still in use Ubboo_post_link ----------------- grid system ----------------- */
.grid-all {
	padding: 0px;
}
.grid-all li {
  position: relative;
  list-style-type: none;
  overflow: hidden;
  float: left;
  margin:1.1%;
  width: 31.1%;
}
.grid-all .grid-post img {
  position: relative;
  width: 100%;
  height: auto;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

.grid-all .grid-post:hover img {
  transform: scale(1.1);
  opacity: 0.6;
}
.grid-all .grid-title {
  max-width: 150px;
  position: absolute;
  bottom: 10px;
  left: -170px;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  transition-delay: 0s;
}
.grid-all .grid-post:hover .grid-title {
  left: 10px;
}
.slider .grid-all .grid-post {
  margin: 0px;
}


/* ------------------------- timeline ------------------------- */
.ubboo-timeline {
  overflow: hidden;
  position: relative;
}

.ubboo-timeline::before {
  background-color: #555;
  border-radius: 50%;
  content: "";
  display: block;
  height: 10px;
  left: 0;
  position: absolute;
  top: 28px;
  width: 10px;
}

.ubboo-timeline > ul > li {
  position: relative;
  list-style-type: none !important;
}

.ubboo-timeline > ul > li::before {
  background-color: #555;
  content: "";
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  top: 32px;
  width: 100%;
}

.ubboo-timeline > ul > li:last-child::before {
  background-image: -moz-linear-gradient(left center , #555 0%, #555 70%, #fff 100%);
  background-image: -webkit-linear-gradient(left, #555 0%, #555 70%, #fff 100%);
}

.ubboo-timeline-row {
  padding: 0px;
}

.ubboo-timeline-box li {
  list-style-type: square !important;
  margin-bottom: 0;
  text-align:left;
}

.ubboo-timeline-when {
  color: #e7e7e7;
  background-color: #555;
  width: 100px;
  height: 64px;
  line-height: 64px;
  margin: 0 auto;
  position: relative;
}

.ubboo-timeline-when::after {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #555 transparent transparent;
  border-image: none;
  border-style: solid;
  border-width: 5px;
  content: "";
  display: block;
  height: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  top: 100%;
  width: 0;
}

/* ------------------------- woocommerce ------------------------- */
.demo_store {
  visibility: hidden !important; /* notice only visible on woocommerce specifics */
}
.ubboo-woocommerce .demo_store {
  visibility: visible !important;
}

/* ------------------------- protected post and page (password form was not visible) ------------------------- */
.post-password-form p {
  display: inline;
}

/* ------------------------- uBbOo richlink shortcode --------------------------- */

/* ---------------- richlink management ---------------- */
.richlink,
.richlink a {
	display: inline-flex; /* inline-flex (inline with title or not), flex (block with title or not) */
	flex-direction: row;	
	vertical-align: top
}
.richlink-header {
  flex-shrink: 99;
}

/* ---------------- image management ---------------- */
.richlink-container {
	position: relative; /* mandatory */
	overflow: hidden;  /* mandatory */
}

/* ---------------- image management ---------------- */
.richlink-container img {
	width: 100%; /* mandatory */
	height: auto;  /* mandatory */ 

	transition: all 0.5s ease 0s;  /* effect */
}
.richlink:hover img {
  transform: scale(1.1);
  opacity: 0.6;
}

/* ---------------- overlay management ---------------- */
.richlink-overlay-title {
	position: absolute;  /* mandatory */

	width: 100%; /* layout */

	bottom: 10px;/* effect */	
	left: calc(-100%);  /* effect */
	opacity:0; /* effect */
	left: -100%;
	ztransition: all 0.5s ease 0S;
	transition: 1s ease; /* effect */
}
.richlink:hover .richlink-overlay-title {
	opacity: 1;
	left: 0px;
	padding-right: 5%;
	width: calc(100% - 10px);
}

/* ---------------- overlay2 management ---------------- */
.richlink-overlay-excerpt {
	position: absolute;  /* mandatory */

	right: 8px;
	transition: all 1s ease 0s;
	max-width: calc(100% - 16px);
	top: -100%;  /* effect */
	opacity:0; /* effect */
}
.richlink:hover .richlink-overlay-excerpt {
	opacity: 1;
	top: 8px;
}
/* ---------------- text layout ---------------- */
.richlink-title {
	background-color: rgba(0, 0, 0, 0.2);
	font-size: 2em;
	padding: 10px 10px 10px 0px; 
	text-align: center; 
} 
.richlink-excerpt {
	background-color: rgba(255, 255, 255, 0.7); 
	color: black; 
	font-size: 1em; 
	padding: 1em; 
	text-align: center; 
} 

.richlink.richlink-vignette-large .richlink-title,
.richlink.richlink-blog-full .richlink-title {
  font-size: 3em;
}

.richlink.richlink-thumbnail .richlink-title,
.richlink.richlink-blog-grid .richlink-title {
  font-size: 1.5em;
}
.richlink.richlink-post-thumb .richlink-title {
  font-size: .75em;
}

.richlink.richlink-vignette-large .richlink-excerpt,
.richlink.richlink-blog-full .richlink-excerpt {
  font-size: 1.5em;
}
.richlink.richlink-thumbnail .richlink-excerpt {
  font-size: 0.75em;
}
.richlink.richlink-post-thumb .richlink-excerpt {
  display: none;
}

.richlink.richlink-thumbnail.rounded .richlink-post img  {
  border-radius: 1.5em;
}
.richlink.richlink-vignette-large.rounded .richlink-post img ,
.richlink.richlink-blog-full.rounded .richlink-post img  {
  border-radius: 3em;
}
.richlink.circle .richlink-post img  {
  border-radius: 50%;
}



/* ------------------------- gutenberg support ------------------------- */

figure.wp-block-embed.is-type-video,   /* for video in full width */
figure.wp-block-embed.is-type-rich {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
}

figure.wp-block-image.alignfull iframe,
figure.wp-block-image.alignwide iframe,
figure.wp-block-embed.alignfull iframe,
figure.wp-block-embed.alignwide iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}