.noscript {
    text-align: center;
    font-size: 1.5em;
    font-family: Arial, sans-serif;
    background: white;
    padding: 20px;
    border: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box;
}

body {
    position: relative;
    min-height: 2000px;
    padding-top: 70px;
    margin-bottom: 0px;
}




.footer {
  bottom: 0;
  width: 100%;
  height: 40px;
  background-color: #f8f8f8;
  border: 1px solid #e7e7e7;
}


.container .text-muted {margin: 12px 0; font-size:12px;}


@media (min-width: 768px) {
    .container .text-muted:after {content: " | All rights reserved."; }
}



.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

#content {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#content.loaded {
    opacity: 1;
}


p.date {text-align:right; font-size:85%; font-weight:300; color:#777;}
P.cited {text-align:right; font-size:90%; font-weight:300; color:#777;}
p.smallskip {margin-top:.5em;}
p.coverage {color:red; text-align:right; margin-top:.6ex; margin-bottom:2px;}
p.details {text-align:right; font-size:90%; font-weight:300; color:#777;}

img.float-left {float:left; margin-right: 15px; margin-bottom:5px;}
img.badge-cup {height:15px; vertical-align:baseline;}

img.badge-star {height:23px; vertical-align: text-top;}

#me {width:140px;}
#blake {width:140px;}


@media (min-width: 768px) {
    #me {width:200px;}
    #blake {width:200px;}
}

.jumbotron-mao {
    margin-bottom: 15px;
    padding: 15px 5px 0px;   
    position: relative;
    overflow: hidden;
}

.jumbotron-mao h2 {
    margin: 0px;
    position: relative;
    z-index: 2;
}

.jumbotron-mao img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    height: 100%;
    opacity: 0.10;
}


@media (min-width: 480px) {
    .jumbotron-mao {padding: 20px 25px 10px;}   
}


@media (min-width: 768px) {
    .jumbotron-mao img {opacity: 0.2;}
    .jumbotron-mao {padding: 30px 5px 15px;}   
}

@media (min-width: 992px) {
    .jumbotron-mao {padding:40px 5px 30px;}
}

@media (min-width: 1200px) {
    .jumbotron-mao {padding:50px 5px 40px;}
}



span.quote:before {content:open-quote;}
span.quote:after {content:close-quote;}
span.quote {font-style: italic;}


#postal {min-width: 220px;}
#phone {min-width: 180px;}
#web {min-width: 180px;}

#phone td.number {padding-left: 5px;}

#social-links td {padding-right: 3px; padding-top: 4px;}


#sidebar .well {margin-top:20px; padding-bottom:0px;}
#sidebar .contact-address {margin:0px auto 0px; padding-bottom:0px;}

#sidebar #twitter, #sidebar #quote{min-width: 232px;}

@media (max-width: 470px) { 
    .ts {width:100%;}
}


.follow-button {float:right;}
/* .twt-timeline {padding:5px 5px 2px;} */
.twt-timeline {padding:0px;}
.twitter-timeline {height:400px; width: 100% !important;}

#ants-conference a {text-decoration: none; color:black;}
#ants-conference .title {font-size: 180%;  font-weight: 500; margin-top: 10px; text-align: center;}
#ants-conference .subtitle {font-size: 130%; font-weight: 400; margin-bottom: 10px; text-align: center;}

#mybook img {float:left; margin-right: 15px; margin-bottom:5px;}
#mybook h4 {margin-top:1.5em;}
#mybook .title {font-size: 140%; font-weight: 700;}
#mybook .subtitle {font-size: 100%; font-weight: 700;}

#erc img {float:left; margin-right: 15px; margin-bottom:15px;}
#erc h4 {margin-top:1.5em;}
#erc .title {font-size: 140%; font-weight: 700;}
#erc .subtitle {font-size: 100%; font-weight: 700; margin-bottom:20px}


.video-small {width: 280px;  margin-right:10px;  margin-bottom:10px;}


.relevant-article img {width:280px;  margin-right:10px;  margin-bottom:10px;}
.relevant-article h4 {margin-top:1.5em;}
.relevant-article .title {font-size:140%; font-weight:600; margin-bottom:0px;}
.relevant-article .authors {font-size:120%; font-weight:500; margin-bottom:2px;}
.relevant-article .publication {font-size:100%;}
.relevant-article .link {font-size:100%; margin-bottom:2px;}
.relevant-article .doi {font-size:100%; margin-bottom:20px;}

.media-banner {width:400px; margin-bottom:15px;}


@media (min-width: 480px) {
    .relevant-article .break {display: none;}
}

@media (min-width: 768px) {
    .relevant-article .title {font-size: 130%; font-weight: 700;}
    .relevant-article .authors {font-size: 120%; font-weight: 600;}
    .relevant-article img {float:left; margin-right: 15px; margin-bottom:15px; width:260px;}
}



p.note {clear:both;  margin:2em 0 0 0; font-size:90%;}

.list-group.compact {margin-bottom:0px; margin-top:0px;}

.list-group.compact .list-group-item {margin-bottom:0px; margin-top:0px; padding-bottom:.8ex; padding-top:.8ex;}

.list-group-item:last-child {padding-bottom: 0px;}

.list-group-item {border: none; padding-left:0px;}
.list-group {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.list-group .name {font-weight: bold;}
.list-group .title, .list-group .description {font-style: normal;}

.list-group .university,
.list-group .company,
.list-group .address,
.list-group .date,
.list-group .location-date,
.list-group .institution,
.list-group .details {font-size:90%; font-weight:300; color:#777;}

@media (min-width: 768px) {
    .list-group .university,
    .list-group .company,
    .list-group .address,
    .list-group .date,
    .list-group .location-date,
    .list-group .institution,
    .list-group .details {font-size:85%;}
}



#teaching-projects div.description h3 {
    margin-top: 40px;
}

#teaching-projects div.description h3.gone {
    position: relative; /* Required for absolute positioning inside */
    display: block;
    z-index: 2; /* Ensure text stays above */
}

/* Attach the overlay to the bottom of h3 */
#teaching-projects div.description h3.gone::before {
    content: ""; /* Empty content for overlay */
    position: absolute;
    bottom: -180px; /* Moves it below the h3 text */
    left: 0;
    width: 100%;
    height: 180px; /* Default height */
    z-index: 1; /* Ensure it is behind text */

    background-image: url("../img/assigned.png"); /* Ensure correct path */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;

    opacity: 1;
    transform: rotate(-10deg); /* Rotation preserved */
    pointer-events: none; /* Prevents interaction issues */
}


/* 🔥 Tablets (iPads, small laptops) */
@media (max-width: 992px) {
    #teaching-projects div.description h3.gone::before {
        height: 170px;
        bottom: -160px;
        background-size: 70%;
    }
}


/* 🔥 Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #teaching-projects div.description h3.gone::before {
        height: 150px; /* Reduce height slightly */
        bottom: -140px; /* Adjust position accordingly */
        background-size: 75%; /* Make it larger relative to the container */
    }
}

@media (max-width: 480px) {
    #teaching-projects div.description h3.gone::before {
        height: 120px; /* Smaller height */
        bottom: -120px; /* Adjust position */
        background-size: 100%; /* Make it even larger */
    }
}


.list-group .name:after {content:". "; margin-right:.2em;}
.list-group .title:after {content:". ";}
.list-group .description:after {content:". ";}
.list-group .university:after  {content: ". ";}
.list-group .company:after  {content: ". ";}
.list-group .institution:after  {content: ". ";}
.list-group .address:after  {content: ". ";}
/*
.list-group .details:before {content:" (";}
.list-group .details:after {content:") ";} 
*/
.list-group .details:after {content:". ";}

.list-researcher-current .date:before {content: "Since ";}
.list-researcher-forthcoming .date:before {content: "";}
.list-researcher-phd-awarded .date:before {content: "PhD awarded on ";}


.list-courses .title, .list-projects .title, .list-honors .title {font-weight: bold;}
.list-honors .title:after {content:"";}


.editorial-activities .pub-icon {height: 230px;}
.editorial-activities div.img-box {float: left; height: 210px; width: 130px;}
.editorial-activities img {max-height: 180px; max-width: 130px; height: auto; width: auto; float: left; margin: 0px 10px 20px 0px;  }

.editorial-activities div.date,
.editorial-activities div.location,
.editorial-activities div.role,
.editorial-activities div.details,
.editorial-activities div.full-name {font-size:90%; font-weight:300; color:#777;}

.editorial-activities div.role {margin: 5px 0 0px; }

.editorial-activities div.name {margin: 10px 0 5px; }
.editorial-activities div.full-name {margin: 5px 0 5px; font-style: italic;}

div.r-alert {text-align:right; margin: -8px 0 20px; }


.section {clear:both; display: block; margin-top:3em; margin-bottom:3em; border-bottom: 1px solid #eee;}
.section:first-child {margin-top: 0px;}
.section h2 {padding-bottom: 2px; border-bottom: 1px solid #eee}

.media-item p.description {
    padding-top: 5px;
    padding-bottom: 2px;
    margin: 0px;
}

.media-item span.details:after {content: " - ";}


#media .media-item {margin-bottom: 10px;}
#media .media-item:nth-child(odd) {clear: both;}
#media a.ghost {text-decoration:none; color:black; font-style: oblique;}



@media (max-width:767px){
    #navbar-myName-first:after {
	content: "auro ";
    }
    
    #navbar-myName-last:after {
	content: "irattari";
    }
}



#media {padding-bottom: 20px; padding-top: 2em; }

/* Ensure navbar remains visible when expanded */
.navbar-collapse {
    background-color: white !important;
    border-radius: 0 !important;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out !important;
    overflow: hidden !important;
}

/* ✅ Smooth opening */
.navbar-collapse.in,
.navbar-collapse.show {
    max-height: 500px !important; /* Adjust as needed */
    opacity: 1 !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out !important;
}

/* 🔥 Smooth closing animation */
.navbar-collapse.collapsing {
    max-height: 500px !important; /* Start at full height */
    opacity: 1 !important;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out !important;
}

/* ✅ As it closes, shrink max-height */
.navbar-collapse.collapsing {
    max-height: 0 !important;
    opacity: 0 !important;
}


#sidenav {
    position: fixed;
    left: 0px;
    top: 40px;
    z-index:3000;
}


#sidenav .btn-xs {padding: 3px 5px;}

    
.fancybox-skin {
 background-color: rgba(248,237,212,1) !important;
}
    
.scirob-links {
    font-size: 95%;
    font-weight: 350;
    color: #777;
}
.scirob-links  a {
    text-decoration: none;
    color: inherit;
    margin-left: 2px;
    margin-right: 2px;
}




#Spotify .panel {
  border: none;
  box-shadow: none;
}



#spotify-player {
    width: 100%;
    height: 84px !important;
    max-width: 500px; 
    border-radius: 0px !important;
    margin-bottom: -4px;
    padding: 2px;
}

#spotify-container {
    background-color: rgb(37, 86, 125);
    
}

/* Container for the buttons */
#spotify-buttons {
    display: flex;
    justify-content: center; /* Centers buttons horizontally */
    gap: 5px; /* Space between buttons */
    margin-top: -3px;
    padding: 5px;
}

/* Make the buttons take up equal space */
#spotify-link, #spotify-playlist-link {
    flex: 1; /* Make buttons expand evenly */
    text-align: center;
}

/* Style the buttons */
#spotify-link button, #spotify-playlist-link button {
    background-color: #1DB954; /* Spotify Green */
    color: white;
    border: none;
    padding: 4px 5px;
    font-size: 11px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
    width: 100%; /* Make buttons fill their container */
}

/* Hover effect */
#spotify-link button:hover, #spotify-playlist-link button:hover {
    background-color: #169c45; /* Slightly darker green */
}