/* color variable in functions.php */
	:root{            
		--text-shadow: 2px 15px 35px rgba(0,0,0,0.25);
		--gredient: radial-gradient(circle 800px at center 8%, rgba(255,255,255,0.1), var(--color-secondary));
		--gredient-md: radial-gradient(circle 1000px at center 10%, rgba(255,255,255,0.1), var(--color-secondary));
		--text-gredient: radial-gradient(circle 100px at center 0%, rgba(255,255,255,0.1), var(--color-primary));
		--text-gredient-md: radial-gradient(circle 200px at center 0%, rgba(255,255,255,0.1), var(--color-primary));
	}


	
	body{font-family: 'Poppins', sans-serif; color: var(--color-primary);font-size: 1rem; background: var(--gredient); background-attachment: fixed;}
	/**/
	h1, .h1{font-weight: 600; font-size: 2em; line-height:1.25;}
	h2, .h2{ font-weight: 600; font-size: 1.5em;}
	h3, .h3{ font-weight: 600; font-size: 1em;}
	/* p{ line-height: 1.5; margin: 0 0 1.5rem 0;} */



	a{ color: inherit; text-decoration: none; transition: 0.3s;  }
	a:hover{ text-decoration: none;}
    p a{text-decoration: underline;}




	.sticky{ position: sticky; top: 0px;}
	.navbar{background: rgba(255, 255, 255, 0);backdrop-filter: blur(20px); }
	.navbar li{ margin: 0 10px}
	.navbar li a{ text-transform: uppercase; border-bottom: 1px solid transparent;}
	.navbar li a:hover, .navbar li.current-menu-item a, .navbar li a:active{ border-color: var(--color-primary);}
	
	
	h1.title{ font-size: 4em; font-weight:800; line-height: 1.25; 
		background-image: var(--text-gredient);background-size: 100%;background-repeat: repeat;-webkit-background-clip: text;-webkit-text-fill-color: transparent; -moz-background-clip: text;-moz-text-fill-color: transparent;
	}    
	
	.border-light{border-color: rgba(0, 0, 0, 0.1);}
	.shadow{box-shadow: var(--text-shadow);}
	.fullwidth{ margin: 0; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw;margin-right: -50vw;}

	.bg-default{ color: var(--color-primary); background:#fff} 
	.bg-inverse{ color: var(--color-secondary); background: var(--color-primary); }
	
	.featured-image{max-height: 500px; overflow: hidden;}
	.research img{ width: 100%; height: 100%;  object-fit: cover;}

	.profile figure{ background-color: var(--color-primary); max-width: 300px;}
	.profile img{ width: 100%; height: auto; -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.95;}
	.profile p{margin: 0; line-height: 1.5; font-size: 0.8rem;}
	.profile h4{font-weight: 600;}
	span.pi {width: 100%; height: 2px; background: var(--color-primary); position: absolute; left: 0; bottom: 0; }

	.sidebar{ min-width: 30vh;}



	@media only screen and (min-width: 52em){ /* breakpoint-md */
		/* html, body{background: var(--gredient-md)} */
		/* h2, .h2{ font-size: 1.6em;} */
		h1.title{ font-size: 9em; text-shadow: var(--text-shadow)}
		.excerpt{ padding:4rem };
		/* text-shadow: var(--text-shadow);background-image: var(--text-gredient-md); }    */
		/* #research img{ height:100%; width: 100%; object-fit: cover;} */
	}

	@media only screen and (min-width: 64em){ /* breakpoint-lg */
		/* html, body{ font-size: 1.1em;} */
		h1, .h1{ font-size: 2.25em;} 
		h1.title{ font-size: 10.5em;font-weight: 800; text-shadow: var(--text-shadow);}   
		.subtitle{ font-size: 1.8em;}               
		.excerpt{ padding:4rem };

	}