/*
Special css layer for micro-momentum website

Theme Name: uBbOo Theme
Theme URI: http://abrazo-tango.fr
Description: A common theme for Abrazo Tango websites
Author: Didier Rizzo aka uBbOo
 
*/

/* Sticky footer styles -------------------------------------------------- */
@font-face {                            
	font-family: 'Unsteady'; src: url('../fonts/UNSTEADY.ttf');
	font-weight: normal;
	font-style: normal;
	}
	
html,
body {
  height: 100%;
  background-color: #222222;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
body {
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Links */
a,
a:focus,
a:hover {
  color: #99f;
}

/* for navbar --------------------------------------------------  */

:root{
  --navbar-admin-background-color: red;

  --navbar-color: #999;
  --navbar-background-color: rgba(9,9,9,0.1);
  --navbar-active-color: #555;
  --navbar-active-background-color: #e7e7e7;
  --navbar-hover-color: white;
  --navbar-hover-background-color: black;
  --navbar-dropdown-color: #fff;
  --navbar-dropdown-background-color: rgba(34,34,34,0.9);
  --navbar-dropdown-hover-color: white;
  --navbar-dropdown-hover-background-color: black;
  --navbar-dropdown-active-color: #555;
  --navbar-dropdown-active-background-color: #e7e7e7;
}

.navbar-brand {
	font-family:'Unsteady', "Impact", Charcoal, Arial Black, Gadget, Sans serif;
	font-size: 24px;
}	
	
/* Set font-sizes for the headings -------------------------------------------------- */
h1	{
	text-align: left;
	font-family:'Unsteady', "Impact", Charcoal, Arial Black, Gadget, Sans serif;
	text-transform: uppercase;           
	line-height: 1;          
	font-size:500%;
	font-weight:normal;
	margin-top: 30px !important;
	margin-bottom: 60px;
	}
	
h2	{
	text-align:center;
	font-family:'Unsteady', "Impact", Charcoal, Arial Black, Gadget, Sans serif;
	text-transform: uppercase;           
	line-height:1; 
	font-weight:normal;
	margin-top: 20px;
	}
	
h3	{
	text-align:left;
	font-family:'Unsteady', "Impact", Charcoal, Arial Black, Gadget, Sans serif;
	line-height:1;   
	color:#999;             
	font-size:150%;
	font-weight:normal;
	padding-left: 30px;
	}			

.dark {
	background-color: #000;
	color: #fff;
}
/* ---------------- pour la home page d'uBbOo ---------------- */
.page165 .richlink-container img {
  border-radius: 50%;
}

.carousel .richlink .richlink-post .richlink-title {
  font-size: 2.5em;
  font-family: 'Unsteady', "Impact", Charcoal, Arial Black, Gadget, Sans serif;
  text-transform: uppercase;
  color: white;
}
.carousel .richlink .richlink-post .richlink-excerpt {
  font-size: 1em;
  color: white;
}		

/* for top featured image -------------------------------------------------- */
.featured-image-title {
	width: 140px !important;
	height: 140px !important;
	border-radius: 50%;
	position: relative;
	width: 33%;
	float: left;
}

/* for jumbotron (quote on top of page) -------------------------------------------------- */
.wp-block-pullquote {
	padding: 30px 15px;
	margin-bottom: 30px;
	color: inherit;
	background-color: #444 !important;
   border-radius: 6px !important;
	position: relative;
	width: 33%;
	float: right;
	}

.wp-block-pullquote p {
	margin-bottom: 15px;
	font-size: 21px;
	font-weight: 200;
	}
blockquote {
	border-color: #999;
}

/* for richlink -------------------------------------------------- */
.richlink.category a:hover {
  text-decoration: none;
}
.richlink.category h2 {
  text-decoration: none;
  font-size: 5em;
  color: white;
}
.richlink.category:hover .richlink-post img {  
  transform: scale(1);
  border-radius: 15%;
  opacity: 10.6;
}
.richlink .richlink-post {
  margin-right: 30px;
}
.richlink .richlink-post .richlink-title {
  top: 10px;
}

.richlink .richlink-post .richlink-excerpt {
	top: auto;
  bottom: -100%;
}
.richlink:hover .richlink-post .richlink-excerpt {
	top: auto;
  bottom: 10px;
}




.richlink-title {
  background: none !important;
  font-size: 2em;
  padding: 10px 10px 10px 0px; 
  font-family:'Unsteady', "Impact", Charcoal, Arial Black, Gadget, Sans serif;
  text-transform: uppercase; 
  text-align: center;  
  color: white !important;  
} 
.richlink-excerpt {
  background: none !important; 
  font-size: 1em; 
  padding: 1em; 
  text-align: center; 
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
} 
.category-page .richlink {
  display: block;
  padding: 20px;
}
.richlink:hover img {
  transform: scale(1.5);
  opacity: 1;
  filter: brightness(90%) grayscale(0%) hue-rotate(0deg) blur(2px);
}

/* ---------------- richlink for categories ---------------- */
.category-page .richlink-container {
  overflow: visible; 
}
.category-page .richlink-container img {
  width: calc(var(--viewport-width) * .2);
  height: calc(var(--viewport-width) * .2);
  object-fit: cover;
  border-radius: 50%;
}
.category-page .richlink-overlay-title {
  top: 0.1em;
  left: calc(100%);
  width: calc(var(--viewport-width) * .7);
  opacity: 1;
  font-size: calc(var(--viewport-width) * .05);
  line-height: calc(var(--viewport-width) * .06);
}
.category-page .richlink:hover .richlink-overlay-title {
  text-align: right;
  opacity: 1;
  left: calc(100%);
  width: calc(var(--viewport-width) * .7);
  padding-right: 0;
}
.category-page .richlink-overlay-excerpt {
	top: 0; 
}