@font-face {
    font-family: 'houschka';
    src: url('/fonts/HouschkaAltPro-Bold.woff2'),
	 url('/fonts/HouschkaAltPro-Bold.woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'extra-houschka';
    src: url('/fonts/HouschkaAltPro-ExtraBold.woff2'),
	 url('/fonts/HouschkaAltPro-ExtraBold.woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'light-houschka';
    src: url('/fonts/HouschkaAltPro-Light.woff2'),
	 url('/fonts/HouschkaAltPro-Light.woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'medium-houschka';
    src:url('/fonts/HouschkaAltPro-Medium.woff2'),
	 url('/fonts/HouschkaAltPro-Medium.woff');
	font-weight: normal;
	font-style: normal;
}

h1{
    font-family: 'extra-houschka', Arial, Helvetica;
    text-transform: uppercase;
}
h1 {
    font-size: 34px; 
    letter-spacing: 1px;
    line-height: 32px; 
}

@media (min-width: 576px) { 
    h1 {
        font-size: 34px; 
        letter-spacing: 1px;
        line-height: 32px; 
    } 
}
@media (min-width: 768px) { 
    h1 {
        font-size: 42px; 
        letter-spacing: 3px;
        line-height: 40px; 
    }
}
@media (min-width: 992px) { 
     h1 {
        font-size: 50px; 
        letter-spacing: 3px;
        line-height: 48px; 
    }
}
@media (min-width: 1200px) { 
    h1 {
        font-size: 50px; 
        letter-spacing: 3px;
        line-height: 48px; 
    }
}

h2{
    font-family: 'extra-houschka', Arial, Helvetica;
    font-size: 34px; 
    text-transform: uppercase;
    letter-spacing: 1px;
}

p{
    font-family: 'medium-houschka', Arial, Helvetica; 
    font-size: 22px; 
}

ol, ul{
    font-family: 'medium-houschka', Arial, Helvetica; 
    font-size: 18px;
    line-height: 27px;
    margin-top: 10px;
}
ul li,
ol li{
    font-size: 18px;
    margin-top: 10px;
	margin-left: 20px;
}
ul li a,
ol li a{
    color: #333333;
    text-decoration: underline; 
}
ul li a:hover,
ol li a:hover{
    text-decoration: underline;   
}
ul li a.onState,
ol li a.onState{
    color: #4a0d66;
    text-decoration: underline;
}
ul li a.onState:hover
ol li a.onState:hover{
    text-decoration: none;
}
.triangle{
    text-align: center;
    line-height: 0;
}

a{font-family: 'houschka', Arial, Helvetica; text-decoration: underline; }
a:hover{text-decoration: none; }

a sup{font-family: 'medium-houschka', Arial, Helvetica; text-decoration: underline; }


.bgGray{
    background-color: #f0f2f2;
}


.navbar .pipes{
    padding: .5rem .5rem;
}
.navbar .pipes,
.navbar .nav-item a.nav-link,
.navbar .nav-item{ 
    color: #4a0d66; 
    font-size: 16px;
    font-family: 'extra-houschka', Arial;
}

@media (min-width: 100px) { 
    .navbar .nav-item{
        text-align: center; 
    }
    .navbar-nav{background-color:#fff; border-bottom: 1px solid #4a0d66;}

}

@media (min-width: 992px) { 
    .navbar .nav-item{
        text-align: right; 
    }
    .navbar-nav{background-color: transparent; border-bottom: 0px;}
}


.banner{
    background-color: #4a0d66;
    text-align: center; 
    color: #fff;
    height: 500px;
    background-image: url(../images/banner-bg.webp);
    background-position: 50% 50%; 
    background-size: cover; 
    background-repeat: no-repeat;
    border-bottom: 5px solid #4a0d66;
}
.banner h1{
    filter: drop-shadow(5px 4px 2px rgba(0,0,0,0.75));
}
.banner p{
    color: #fff; 
    font-size: 22px; 
    line-height: 32px; 
}

.banner{
    height: 440px; 
    display: table; 
    width: 100%;
    
}
.banner .tableCell{
    display: table-cell;
    vertical-align: middle;
}


footer{
    padding-top: 50px; 
    padding-bottom: 75px; 
    text-align: center;
    background-color: #4a0d66;
    color: #fff;
}

#contact a,
#contact p,
#contact h2{color: #fff;}
#contact h2{text-align: center; margin-bottom: 40px; }

#contact p{font-size: 18px; line-height: 27px; }
#contact p.copyright{font-size: 16px; }
#contact a{font-family: 'medium-houschka';}

#contact img{max-width: 275px; margin-top: 60px; margin-bottom: 30px; }


#who{
    text-align: center; 
    padding-top: 40px;
    padding-bottom: 40px;
}
#who .logo{
    width: 275px;
    margin-top: 45px;
}

/*ABOUT */
#about{
    border-top: 5px solid #33d9c3;
    background-color: #4a0d66;
    background-image: url(../images/triangle-teal.png);
    background-position: 50% 0px; 
    background-repeat: no-repeat;
    color: #fff; 
    padding-top: 74px;
    padding-bottom: 74px;
}
#about h2{
    color: #fff;
    margin-bottom: 20px;
}
#about a{
    color: #fff;
}
#about p{ 
    font-size: 18px; 
    line-height: 27px; 
}

/*PROJECTS*/
#projects{
    padding-top: 80px;
    padding-bottom: 80px;
    color: #333333;
}
#projects p{ 
    font-size: 18px; 
    line-height: 27px; 
    
}
#projects a{
    color: #4a0d66;
    text-decoration: underline; 
}
#projects a:hover{ text-decoration: none;}
#projects h2{ color: #4a0d66;}
#projects h3{ 
    color: #4a0d66; 
    font-family: 'houschka', Arial, Helvetica, sans-serif; 
    font-size: 26px;
}
#projects .nav-pills .nav-link{
    color: #33d9c3;
    background-color: transparent;
    font-size: 26px; 
}
.nav-pills{margin-bottom: 30px;}
#projects .nav-pills .nav-link:hover{ color: #4a0d66;}
#projects .nav-pills .nav-link.active, #projects .nav-pills .show>.nav-link{
    color: #4a0d66;
    background-color: transparent;
    font-size: 26px; 
}
#projects .nav-pills .nav-link.active::before, #projects .nav-pills .show>.nav-link::before{
     font-family: "Font Awesome 6 Pro"; 
    font-weight: 900; content: "\f0da";
    text-decoration: none;
    margin-right: 5px;
}
#projects a.nav-link{text-decoration: none;}

/*CONSORTIUM */

#consortium{ padding-top: 86px;  }


#relatedPapers,
#events,
#links,
#consortium{ padding-bottom: 86px; }

#relatedPapers h2,
#events h2,
#links h2,
#consortium h2{color: #4a0d66;}

#relatedPapers h3,
#events h3,
#links h3,
#consortium h3{  font-size: 26px; }


#relatedPapers p,
#events p,
#links p,
#consortium p{  font-size: 18px; line-height: 27px; }

#relatedPapers a,
#events a,
#links a,
#consortium a{color: #4a0d66;}

#consortium a.noUnderlines:hover, #consortium a.noUnderlines{text-decoration: none;}




/*WHITE BORDER - WHITE HORIZONTAL RULE*/
.whiteBorder{
    border-color: #fff; 
    width: 50%; 
    margin-bottom: 30px; 
}
@media (min-width: 100px){
    .whiteBorder{
        display: none; 
    }
}
@media (min-width: 992px){
    .whiteBorder{
        display: block; 
    }
}

/*IMAGES*/

/*#figure2, #figure1 { display: none; }*/
#figure2{text-align: center; }
#meetingsummary img,
#figure2 img,
#figure1 img{
    width: 100%;
    height: auto;
    margin-top: 10px; 
    margin-left: auto; 
    margin-right: auto;
}
@media (min-width: 100px){
    #figure2 img{ 
        width: 100%;
    }
}
@media (min-width: 992px){
    #figure2 img{ 
        width: 66%;         
    }
}
/*IMAGE CAPTIONS*/
#figure2::after,
#figure1::after{
    font-size: 18px; 
    font-family: 'medium-houschka';
    color: #fff;
    display: block;
    margin-top: 5px; 
    margin-bottom: 10px; 
    font-style: italic;
    
}
#figure2::after{content: 'Figure 2';}
#figure1::after{content: 'Figure 1';}
    
    
    
.popOverText {
    position: absolute;
/*        top: 0;*/
        right: 0;
/*        bottom: 0;*/
        left: 0;
    z-index: 13;
    display: none; 
}    
.popOverText span{
    width: 130px; 
    display:block;
    height: auto;
    padding: 5px;
    font-size: 14px; 
    font-family: 'medium-houschka';
    color: black;
    background-color: ghostwhite;
    border: 1px solid #010101;
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px;
    text-align: center;
    margin-left: auto; 
    margin-right: auto;
    margin-top: -10px;
}
    
/*MODAL*/
.modalExtraLarge{
    max-width: 85%;
}
    
.email::after{

    font-family: "Font Awesome 6 Pro";
    content: "\f0e0";
    text-decoration: none;
    display: inline-block;
    white-space: pre;
    padding: 3px 0px 0px 3px;
	font-weight: 400;

}    
.emailAfter::after{
    font-family: "Font Awesome 6 Pro";
    content: "\f0e0";
    text-decoration: none;
    display: inline-block;
    white-space: pre;
    padding: 3px 0px 0px 5px ;
	font-weight: 400;
		

}  
    
    




.navbar-nav > li > a {
    display: inline-block;
}


@media (min-width: 992px){
    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 5px;
    }

    .navbar-nav > li:not(:last-child)::after {
        content: "|";
        padding: 0 5px;
    }    
}


.fingerslogo{

    
}